css选择器nth-child(1),first-child在加入别的标签，为啥会失效？这两段代
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css选择器nth-child(1),first-child在加入别的标签，为啥会失效？这两段代相关的知识，希望对你有一定的参考价值。
css选择器nth-child(1),first-child在加入别的标签，为什么会失效？这两段代码，一个是对的，另外个为什么加了span标签，第一个为什么失效了？
匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。
要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素
你的第一个子元素是span不是li所以无效本回答被提问者和网友采纳 参考技术B 因为li:nth-child(1)指的是作为第一个子元素的li，加入span之后，span就变成了ul的第一个子元素，所以li:nth-child(1)会失效，因为li已经不是太子了；
建议使用first-of-type,nth-of-type,last-of-type 参考技术C 第一个子孩子的hover，你根本就没写。
第三个的hover，你写成 border:1px red solid; 试试
伪类选择器:first-child和:nth-child()和:first-of-type
x:first-child和x:nth-child(1)功能一样，首先选中的是x元素，并且x元素必须是它父元素的第一个子元素，选择器才成立，否则不能选中。其中x也可以是选择器。由此看出nth-child功能强劲，完全可以代替first-child的功能。
x:first-of-type，选择x元素的父元素的首个 x元素，但x不一定是它父元素的第一个子元素，x也不一定是标签选择器，也可以是id选择器、类选择器等。
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background:#ff0000;
}
/*body的第一个子元素是h1不是p，但body的第一个p子元素是存在的，所以first-of-type能选中，如果换成firs-child或者nth-child(1)就不行了*/
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body>
</html>
http://www.w3school.com.cn/cssref/css_selectors.asp
以上是关于css选择器nth-child(1),first-child在加入别的标签，为啥会失效？这两段代的主要内容，如果未能解决你的问题，请参考以下文章
css 中的伪类 first-child 和nth-child的区别