为什么我不能用伪选择器来定位这个类？ [复制]答案

【问题标题】：Why cant I target this class with a pseudo selector? [duplicate]为什么我不能用伪选择器来定位这个类？ [复制]
【发布时间】：2016-08-20 10:58:38
【问题描述】：

您好，我正在努力定位这门课，我不知道为什么。似乎第一个 div 干扰了第二个 div 上的伪选择器。

HTML

<div class="home-work">
<div class="home-work-header"><h3><span>test</span></h3></div>
<div class="home-work-container"><p>test</p></div>
<div class="home-work-container"></div>
<div class="home-work-container"></div>
</div>

CSS

.home-work-container { 
width:100%;
margin:10px 20px;
background-color:grey;
height:250px;
&:first-of-type {padding:144px;}
}

https://jsfiddle.net/L0uoz531/

提前致谢

【问题讨论】：

&: 不是有效的 CSS。这是某种形式的 CSS 预处理器吗？
见stackoverflow.com/questions/6447045/…
是的，他正在使用 SCSS。现在将编辑标签。

标签： html css sass

【解决方案1】：

那是因为&:first-of-type

该属性实际上引用了第一个同级 div（带有id="home-work-header" 的那个）

看看这个小提琴：https://jsfiddle.net/L0uoz531/1/

如果你要瞄准第二个孩子，你会得到你想要的。此链接可能是复杂选择器及其工作原理的最佳参考：http://learn.shayhowe.com/advanced-html-css/complex-selectors/

.home-work-container { 
	width:100%;
	margin:10px 20px;
	background-color:grey;
	height:250px;
 &:nth-of-type(2) {
   padding:144px;
   }
 }

<div class="home-work">
  <div class="home-work-header">
    <h3><span>test</span></h3></div>
  <div class="home-work-container">
    <p>test</p>
  </div>
  <div class="home-work-container"></div>
  <div class="home-work-container"></div>
</div>

【讨论】：

谢谢你已经完成了。不过，我不能说我完全理解，因为这是“家庭作业容器”的第一个实例。
不客气！如果有帮助，请记住将答案标记为已接受！干杯。