刚开始学习选择器，一开始对伪类选择器确实有点懵。昨天晚上自己动手写了写，终于是慢慢搞懂了。下面对一些容易误解的一些知识点做个总结，便于以后复习和查阅。
一.E:first-child
- 我们先来看看
:first-child，一开始我就对这个伪类选择器误解了，以为只是选择某个元素的第一个子元素。举个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
p:first-child{
color: yellow;
}
li:first-child{
background: #ccc;
}
span:first-child{
color: red;
}
</style>
</head>
<body>
<div>
<h3> <em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>
我们可以事先想一下结果会是什么。
先分析一下。在上面的例子中作为某个父元素的第一个子元素的有：第一个h3、第一个em、第一个span、第一个p、第一个li。
再来看看第一个样式，p:first-child{color: yellow;}，它的意思不是说要把p元素的第一个元素变成黄色,而是说把作为某个元素第一个子元素的所有p元素设置为黄色。也就是说它必须要满足两个条件：第一，必须为p标签；第二，必须要为某个父元素的第一个子元素。按照这么说来，例子中没有符合条件的p标签。
然后再来看看第二个样式，li:first-child{background: #ccc;},将作为某个元素（ol或者ul）的第一个子元素li设置背景色为灰色，显而易见，有符合条件的li元素，那就是<li>Learn the front knowledge.</li>。
最后再来看看第三个样式，span:first-child{color: red;}，它就是说把作为某个元素第一个子元素是span的元素颜色变为红色。从上面的例子来看，span有两次出现。第一次是作为h3的第二个子元素，所以不满足要求。再来看看第二个span，它是作为li的第一个子元素，满足了两个条件，所以肯定会变成红色。
结果和预想的完全吻合：
first-child
- 为了加深理解咱们再来举两例：
- 例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child</title>
<style>
.fruit p:first-child{
color: red;
}
.fruit > p:first-child{
text-align: center;
}
</style>
</head>
<body>
<div class="fruit">
<p>There are many fruit.For example:</p>
<ul>
<li>grape</li>
<li>banana</li>
<li>watermelon <p>and so on.</p></li>
</ul>
<p>Which is your favorite?</p>
</div>
</body>
</html>
上面的代码中写了两个样式，其中会牵扯到组合选择器。我们先来看看第一个，.fruit p:first-child{color: red;}。这是一个后代选择器，这在我的另一篇博客：CSS选择器当中做过说明。它用来匹配.fruit的所有后代（不只是子元素、还包括子元素向下递归），而在这里后代的要求为：必须是p元素且必须为某个元素的第一个子元素。这样说来满足要求的就是：
<p>There are many fruit.For example:</p>和<p>and so on.</p>，所以结果是把它们渲染为红色。再来看看第二个样式，.fruit > p:first-child{text-align: center;}。这是一个直接子元素选择器，它用来匹配.fruit的直接子元素（不包括向下递归的元素，而是同一层级的第一层子元素。），而直接子元素的要求为：必须是p元素且必须为某个元素的第一个子元素。这样说来满足要求的就是：<p>There are many fruit.For example:</p>。
再来看看结果，和预想的完全一样。
后代选择器和:first-chlid组合使用
- 例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first-child</title>
<style>
p:first-child span{
font-weight: bold;
}
</style>
</head>
<body>
<div class="hello">
<p><em>Hello</em>,my name is <span>cao tingting</span>.I'm a <span>new-comer</span> here and relly <span>appreciate</span> your advice.</p>
</div>
</body>
</html>
例2中只有一个样式，它表示什么意思呢？p:first-child span，首先找到某个元素第一个子元素是p的标签，再来找到p里面所有的<span>。那么显而易见，在这个例子中就是<span>cao tingting</span>、<span>new-comer</span>以及<span>new-comer</span>，将他们设置粗体。
效果
总结：E:first-child要满足两个条件。第一：必须是E元素；第二：必须要是某元素的第一个子元素。
二.E:first-of-type
这个伪类选择器的含义就是匹配父元素下使用同种标签的第一个子元素（等同于:nth-of-type(1)），它和E:first-child不一样。它主要强调同种类的标签中的第一个而不管这类标签是否是第一个出现。也就是说先找出所有的E元素再找到第一个。下面来举个例子进行说明，我们就用第一个例子来说明，以便进行对比。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
p:first-child{
background: #ccc;
}
p:first-of-type{
color: red;
}
</style>
</head>
<body>
<div>
<h3><em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>
前面已经分析过为什么p:first-child会没有效果，咱们再来看看p:first-of-type，首先找出所有的p元素，再来看看第一个是谁，这里面就是<p>Next stage</p>，所以它渲染为红色。
效果对比图
总结：E:first-of-type强调的是以元素种类划分，即先找到所有的E元素，再来找到第一个。
三.以此类推的E:nth-child(n)和E:nth-of-type(n)等等
关于n的取值，它可以为： 1，2，3，4，5； 2n+1, 2n, 4n-1； odd, even。
-
nth-child(n)
它表示匹配其父元素的第n个子元素，第一个编号为1。如果第n个子元素为E，则被选中。它其实和E:first-child是一个原理，都要满足上面提到的两个条件。
与E:first-child原理相同的还有：
E:nth-last-child(n),表示匹配其父元素的倒数第n个子元素，第一个编号为1；
E:last-child，表示匹配父元素的最后一个子元素，等同于:nth-last-child(1)； -
E:nth-of-type(n)
它表示匹配同一种类标签的第n个子元素。它的原理和E:first-of-type一样。
与E:first-of-type原理相同的还有：
E:nth-last-of-type(n)，表示匹配作为某个元素子元素E（只计算使用同种标签的元素）的倒数第n个元素。
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
为了看的更明显，再来举个例子吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对比</title>
<style>
span:nth-child(2n){
background: yellow;
}
span:nth-of-type(2n){
color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h3>标题</h3>
<span>内容1</span>
<span>内容2</span>
<p>这是一个<span>很长</span>的<span>段落。</span></p>
</div>
<ol>
<li>列表<span>内容</span></li>
<li>列表内容</li>
<li>列表内容</li>
</ol>
</div>
</body>
</html>
结果也是可以预料的。
结果对比
到此为止应该对这一块都很清楚了吧。
再来补充几点用法
四.感知子元素的个数
.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
color: red
}
:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。
如果总数不够四个，就不会选择任何元素。
但是如果只用~ li，是不会匹配到第一个li的，所以又加上了li:nth-last-child(n+4):first-child。
实现了根据元素个数的多少来应用不同的样式。
网友评论