CSS 伪类选择器

CSS 伪类选择器

:first-child

兼容性：IE8+、FireFox、Chrome、Safari、Opera

<style>
  section:first-child {
    color: yellowgreen;
  }
</style>
<!-- 只有第一个section 被选中 -->
<section>
   <div>1-1</div>
   <div>1-2</div>
   <div>1-3</div>
 </section>
 <section>
   <div>2-1</div>
   <div>2-2</div>
   <div>2-3</div>
 </section>

:last-child

兼容性：IE8+、FireFox、Chrome、Safari、Opera

说明：last-child 和 first-child 级别并列。xxx:last-child，表示如果最后一个元素是xxx 的话，则匹配，否则不匹配。（而不是最后一个xxx 匹配）

:nth-child(N)

兼容性：IE9+、FireFox4、Chrome、Safari、Opera

ul > li:nth-child(3) {
  background: yellowgreen;
}

说明：代码表示，ul 里面的第3 个元素，如果是li 则匹配，如果不是，则不匹配。

:nth-child(n)
其中n 代表一个表达式，取值从0 开始。

/* 偶数 */
ul > li:nth-child(2n) {
  background: yellowgreen;
}
ul > li:nth-child(even) {
  background: yellowgreen;
}
/* 基数 */
ul > li:nth-child(2n+1) {
  background: lightblue;
}
ul > li:nth-child(odd) {
  background: lightblue;
}
/* 变通使用 */
ul > li:nth-child(3n+1) {
  background: lightblue;
}

:nth-last-child(N)

兼容性：IE9+、FireFox4、Chrome、Safari、Opera

说明：用法同:nth-child(N)，不同的是从尾部计数。

:nth-of-type(N)

概念：匹配属于父元素的特定类型的第N 个子元素的每个元素。
兼容性：IE9+、FireFox4、Chrome、Safari、Opera

说明：注意个:nth-child(N) 的区别。:nth-child(N) 表示如果第N 个元素是对应类型时匹配。

:nth-last-of-type(N)

说明：与:nth-of-type(N) 相同，不同之处是倒着计数的。

:first-of-type

概念：匹配属于其父元素的特定类型的首个子元素的每个元素。
兼容性：IE9+、FireFox、Chrome、Safari、Opera

说明：等同于:nth-of-type(1)。

:last-of-type

兼容性：IE9+、FireFox、Chrome、Safari、Opera

说明：和:first-of-type 成对。

:only-child

概念：匹配属于其父元素的唯一子元素的每个元素。
兼容性：IE9+、FireFox、Chrome、Safari、Opera

:only-of-type

概念：匹配属于其父元素的特定类型的唯一子元素的每个元素。
兼容性：IE9+、FireFox4+、Chrome、Safari、Opera

<!-- article:only-child 匹配a1，不匹配a2 -->
<!-- article:only-of-type 匹配a1，匹配a2 -->
<section>
	<article>a1</article>
</section>
<section>
	<div>d2</div>
	<article>a2</article>
</section>

说明：注意区分:only-child。

:empty

概念：空选择。
兼容性：IE9+、FireFox、Chrome、Safari、Opera

:not

概念：匹配非指定元素/选择器的每个元素
兼容性：IE9+、FireFox、Chrome、Safari、Opera
语法：父元素:not(子元素/子选择器)

<!-- 元素之间的间隔，最后一个除外 -->
nav > a:not(:last-of-type) {
	border-right: 1px solid red;
}

css 权重

权重等级与权值：

行内样式(1000) > ID 选择器(100) > 类、属性选择器和伪类选择器(10) > 元素和为元素(1) > *(0)

权重计算口诀：

从0 开始，一个行内样式+1000，一个id+100，一个属性选择器、class或者伪类+10，一个元素名或者伪元素+1。

伪元素

概念：css 伪元素用于向有些选择器设置特殊效果。
兼容性：IE9+、FireFox、Chrome、Safari、Opera
语法格式：元素::伪元素 (Element::pseudo-element)
说明：两个冒号在新版本中，可以只写一个冒号。

::first-line

只用于块级元素。

::first-letter

只用于块级元素。

::before
在元素的内容前面插入新内容，常用“content” 来配合。

::after

同::before。

::selection

用于设置在浏览器中选中文本后的背景色与前景色。

兼容性：IE9+、FireFox 需要加 -moz、其他都可以兼容

至此，结束。