通常被忽略的CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果。比如我们最常用的:hover伪类，其实css里面有很多伪类，大多不常见，但是其实还是很有用处的，用的好了，可以帮我们减少很多的代码，尤其有时候可以代替很多js的功能，比如隔行变色之类的，用伪类来实现在合适不过了，那么我们看说几个比较有意思的css伪类吧。 

::first-line 选择文本的第一行

::first-letter 选择第一个字母

都是很简单的一看就懂的，就不多说了。

 ::selection 选择高亮的(选中的)区域 

就是平常我们鼠标选中文本时的样式。使用 ，我们可以将样式应用于突出显示的区域，修改浏览器默认的选中样式。 :empty 匹配空项目 该伪选择器将选择没有任何子项的任何元素，元素必须为空。如果元素没有空格、可见内容或子代元素，则该元素为空。 div:empty { border: 2px solid orange; }

该规则将适用于空的div元素。该规则将适用于第一个和第二个div，因为它们确实是空的，而不是第三个div，因为它有空格。 

:only-child 选择唯一的子元素 

选择器匹配属于其父元素的唯一子元素的每个元素。看如下HTML

<div>
  <p>这是一个段落。</p>
</div>

<div>
  <span>这是一个 span。</span>
  <p>这是一个段落。</p>
</div>

注释：Internet Explorer 不支持 :only-child 选择器。

p:only-child { background:#ff0000; } 运行后会选中第一个div里的p标签。 

:checked 选择一个选中的复选框 

匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。 比如下面这样， input[type="radio"]:checked + .xl{background:#28a745;color: #fff;border: 1px solid #28a745;} 单选按钮被选中的时候设定特定的样式，可以配合label标签来制作一些有意思的样式。 :not() 取反 

一个否定伪选择器选择非的东西，让我们来看一个例子： 

.innerDiv :not(p) {
	color: lightcoral;
}
<div class="innerDiv">
  <p>段落 1</p>
  <p>段落 2</p>
  <div>Div 1</div>
  <p>段落 3</p>
  <div>Div 2</div>
</div>

将选择 Div 1 和 Div 2，因为它们不是 p 元素。 

除了上面介绍的几个，还有很多相对经常会用到的css3新增伪类

 :after 在元素内部最前添加内容 :before 在元素内部最后添加内容 

:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n 

:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数

 :nth-child(odd) 匹配父元素下指定奇数子元素

 :nth-child(even)匹配父元素下指定偶数子元素 

:nth-child(3n+1)匹配父元素下指定每三个里面的第一个元素 

:first-child匹配父元素下第一个子元素

 :last-child匹配父元素下最后一个子元素 

child元素选择注意，父元素下必须所有child元素都是同一标签，并且中间不能有间隔，否则可能无效。