Question

嗨，我努力瞄准这门课，我不知道为什么。似乎第一个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/

提前致谢

Answer 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>

为什么我不能用伪选择器来定位这个类？

1 个答案: