html – nth-of-type不在div上工作

概述我和nth-of-type选择器混淆了. 我试过这个片段 .red:nth-of-type(1){ color:red;} <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <div class=" 我和nth-of-type选择器混淆了.

我试过这个片段

.red:nth-of-type(1){  color:red;}

<div >  <span>blah</span>  <p >first</p>  <p >second</p>  <p >third</p>  <div >fourth</div></div>

它得到p和div的类红色并改变它的颜色

现在我坚持这个例子

section .foo:nth-of-type(1){  background:red;}.parent .foo:nth-of-type(1){  background:red;  }

<section>  <p >little</p>  <p>Piggy</p>  <div>...</div>  <div >border...</div></section><div >  <i >1</i>  <i>x</i>  <i >2</i>  <b >3</b><b>x</b><b >4</b></div>

我期望在foo类的部分中使用p和div来获得红色背景但是它不起作用,当div被span替换时它很好用

但是,代码中父div的其他样式正常工作,样式i和b

我知道这是CSS selector for first element with class的副本

解决方法 这是因为具有类’foo’的div不是该类型的第一个子类,它是第二个.选择器只匹配那些类型的第一个元素并且具有类’foo’.

它与您期望的类型AND类中的第一个不匹配

总结

以上是内存溢出为你收集整理的html – nth-of-type不在div上工作全部内容，希望文章能够帮你解决html – nth-of-type不在div上工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。