CSS3中31种挑选器应用方式实例教程

原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发布于 2012 年 6 月，详细介绍了 30 种最常见的 CSS 挑选器用法，多加了1种，变为了铭记 31 种挑选器用法。别的 CSS3 挑选器用法请查询 CSS3 selectors explained 这篇文章内容，另外，W3C CSS3 挑选人体器官方文本文档 Selectors Level 3 W3C Recommendation 29 September 2011 纪录在这里留待有疑惑的情况下查询。

* {  margin: 0;  padding: 0;}

星号挑选器用于选择网页页面中的全部元素，能用于迅速消除全部元素的 margin 与 padding，但最好是只在检测的情况下应用，而不必宣布用在 CSS 文档中，不然会大大加剧访问器压力。另外，星号挑选器还可以给父层的全部子元素设置款式，反复1遍，尽可能少用这类方法：

#container * {  border: 1px solid black;}

适配 IE6+

#container {  width: 960px;  margin: auto;}

id 挑选器，最多见的挑选器用法之1，不能反复应用。

适配 IE6+

.error {  color: red;}

class 挑选器，也是最多见的挑选器用法之1，与 id 挑选器不一样的是 class 挑选器可另外选择好几个元素，而 id 挑选器只能给1个唯一无2的元素设置款式。

适配 IE6+

li a {  text-decoration: none;}

子孙后代挑选器 (descendant selector)，选择 X 元素内的全部 Y 元素，例如上面这段编码将选择 li 标识内的全部连接。

适配 IE6+

a { color: red; }ul { margin-left: 0; }

标识挑选器 (type selector)，用于选择 HTML 标识 (tag)。

适配 IE6+

a:link { color: red; }a:visted { color: purple; }

:link 伪类挑选器 (pseudo class selector) 用于选择全部未点一下过的连接，而 :visited 则用于选择全部已浏览过的连接。

适配 IE6+

ul + p {  color: red;}

邻近挑选器 (adjacent selector)，选择相邻在 X 元素后边出現的第1个元素，例如上面这段编码将选择 ul 元素后出現的第1个元素，也便是 p 元素。

适配性 IE6+

div#container > ul {  border: 1px solid black;}

在第 4 条中，子孙后代挑选器 X Y 选择父层 X 内的全部 Y 元素；子挑选器 X > Y 则只选择立即出現在父层 X 内的 Y 元素。例如下面的 HTML 构造中，#container > ul 选择立即出現在 div#container 内的 ul 元素，不包括嵌套循环在 li 内的 ul 元素：

<div id="container">  <ul>    <li> List Item      <ul>        <li> Child </li>      </ul>    </li>    <li> List Item </li>    <li> List Item </li>    <li> List Item </li>  </ul></div>

适配 IE6+

ul ~ p {  color: red;}

一样也是邻近挑选器，前面第 7 条 X + Y 选择相邻在 X 后出現的第1个元素，而 X ~ Y 将选择 X 元素后出現的全部同级元素。上面这段编码将选择 ul 元素后出現的全部同级 p 元素，而并不是像 ul + p 这样选择第1个出現的 p 元素。

适配 IE7+

a[title] {  color: green;}

特性挑选器 (attributes selector)，依据元素应用的特性进1步变小选择范畴，上面这段编码将选择全部应用了 title 特性的连接，或 a[title="title content"]{color:green} 再进1步变小选择范畴。

适配 IE7+

a[href="http://net.tutsplus.com"] {  color: #1f6053; /* nettuts green */}

上面这段编码将选择全部自动跳转到 http://net.tutsplus.com 的连接，这些连接将显示信息为翠绿色，别的连接不会受到危害。

只是这类方法很严苛不可以相差1个标识符，下面可能逐1详细介绍更灵便的用法。

适配 IE7+

a[href*="tuts"] {  color: #1f6053; /* nettuts green */}

* 表明要是特性值中包括双引号内的內容就考虑选择规定，这段编码将选择自动跳转到 nettuts.com，net.tutsplus.com，或 tutsplus.com 等连接。

适配 IE7+

a[href^="http"] {  background: url(path/to/external/icon.png) no-repeat;  padding-left: 10px;}

^ 表明要是特性值以双引号内的內容开始就考虑选择规定，这段编码也常见来给网页页面中全部外界接设置款式。

适配 IE7+

a[href$=".jpg"] {  color: red;}

$ 表明要是特性值以双引号内的內容末尾就考虑选择规定，这段编码将选择全部自动跳转到 jpg 照片的连接。

适配 IE7+

上面第 14 条提到了怎样选择全部自动跳转到 jpg 照片的连接，若要选择自动跳转到照片的全部连接能够用下面的方式：

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] {  color: red;}

或，先给照片连接加上 data- 特性（注：HTML5 Custom Data Attributes）

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

随后再根据特性挑选器选择：

a[data-filetype="image"] {  color: red;}

适配 IE7+

a[data-info~="external"] {  color: red;}a[data-info~="image"] {  border: 1px solid black;}

假如特性值中有效空格隔开的1连串特性值，~ 能够选择在其中1个特性值，例如：

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

依靠 ~ 选择包括 external 或 image 特性值的元素：

/* Target data-info attr that contains the value "external" */a[data-info~="external"] {  color: red;}/* And which contain the value "image" */a[data-info~="image"] {  border: 1px solid black;}

适配 IE7+

input[type=radio]:checked {  border: 1px solid black;}

:checked 伪类挑选器用于选择全部标识为 checked 的元素，例如单选框 (radio button) 或复选框 (checkbox)。

适配 IE9+

:before 与 :after 是两个让人激动的伪类挑选器，基本上每日都有人创造发明出1些新用法，这里简易详细介绍1下怎样用它消除波动：

.clearfix:after {  content: "";  display: block;  clear: both;  visibility: hidden;  font-size: 0;  height: 0;}.clearfix {  *display: inline-block;  _height: 1%;}

这类方法根据 :after 在元素后边加上1块地区，随后将其掩藏，能够填补 overflow: hidden; 的缺点。

依据 CSS3 挑选器规范，基础理论上伪类挑选器应当应用双冒号，但具体上访问器也适用单冒号的方式，因此能够再次应用单冒号。

适配 IE8+

div:hover {  background: #e3e3e3;}

最常见的伪类挑选器，很少解释了，只是必须留意 IE6 不适用将 :hover 功效于除 a 连接外的别的元素。

a:hover { border-bottom: 1px solid black;}

此外提示1点：border-bottom: 1px solid black; 的实际效果要比 text-decoration: underline; 漂亮1些。

适配 IE6+ （在 IE6 中 :hover 只能功效于连接）

div:not(#container) {  color: blue;}

:not 伪类挑选器有时会起到很关键的功效，假定如今要选择除 #contaienr 外的全部 div 元素，便可以用上面的编码完成。

适配 IE9+

p::first-line {  font-weight: bold;  font-size: 1.2em;}

根据伪元素（应用双冒号 ::）能够给元素的某1一部分设置款式，例如第1行、或第1个字母。必须留意的是，这只对块级元素 (block level elements) 起效。

提醒：伪元素 (pseudo element) 应用双冒号 ::

p::first-letter {  float: left;  font-size: 2em;  font-weight: bold;  font-family: cursive;  padding-right: 2px;}

这段编码将选择网页页面中全部 p 元素，随后再选择在其中的第1个字母。

p::first-line {  font-weight: bold;  font-size: 1.2em;}

与上面的事例相近，根据 ::first-line 选择网页页面的第1行。

以便适配 CSS1 与 CSS2 中的伪元素（例如 :first-line, :first-letter, :before 和 :after），访问器接纳单冒号与双冒号两种文件格式，但针对 CSS3 中全新引进的伪元素，务必应用双冒号。

适配 IE6+

li:nth-child(3) {  color: red;}

:nth-child(n) 用于选择 stack 中的某1个元素，只接纳整数金额作主要参数（主要参数从 1 刚开始计数），假如你想选择第2个 li 元素，只需这样写 li:nth-child(2)。

还可以设置可变的主要参数，例如 li:nth-child(4n) 将选择第 4, 8 , 12… 个元素（4*n, n=1, n++）。

适配 IE9+

li:nth-last-child(2) {  color: red;}

除正序（从上往下）挑选，还可以应用 :nth-last-child(n) 倒序（从下往上）挑选第几个元素，别的用法与第 22 条彻底1样。

适配 IE9+

ul:nth-of-type(3) {  border: 1px solid black;}

:nth-of-type(n) 的功效并不是选择子元素 (child element)，而是选择同类元素 (type of element)。想像1下 HTML 文档中包括 5 个 ul 元素，如今要选择第3个，只需应用上面的编码，而无需再独立这个 ul 加上 id。

有关 :nth-child 与 :nth-of-type 的差别，实际请查询 CSS-Tricks 网站的解释，简易来讲，假如父层内只包括1种元素（例如全是 p 元素）那两种用法是等效的，假如父层包括多种多样元素（例如 p 元素与同级的别的元素），必须选择第几个 p 元素时应当用 :nth-of-type。

适配 IE9+

ul:nth-last-of-type(3) {  border: 1px solid black;}

与第 24 条用法同样，倒序选择同类元素。

适配 IE9+

ul li:first-child {  border-top: none;}

选择父层内的第1个子元素。

适配 IE7+

ul > li:last-child {  color: green;}

与第 26 条用法同样，差别在于 :last-child 选择父层元素内的最终1个子元素。

:first-child 与 :last-child 一般用来消除边框 (border)，例如 <ul></ul> 内每一个 <li></li> 都应用了 border-top 与 border-bottom 边框，結果是，第1个元素的上方与最终1个元素的正下方会是单侧框实际效果。这类状况能够用 :first-child 与 :last-child 消除左右的边框，而无需给第1个元素加上id="first" 或给最终1个元素加上 id="last"。

适配 IE9+

div p:only-child {  color: red;}

这个伪类挑选器不常见，它能够选择包括唯1特定子元素的父层。例如上面的编码中将选择下面第1个 div 元素，而并不是第2个 div 中的 p 元素。

<div><p> My paragraph here. </p></div><div>  <p> Two paragraphs total. </p>  <p> Two paragraphs total. </p></div>

适配 IE9+

li:only-of-type {  font-weight: bold;}

这个挑选器会选择某个元素，而且这个元素在其父层内沒有别的同级同类元素（不1定是唯1元素）。例如，要选择全部只包括1个 li 元素的 ul 元素该如何做呢？假如应用 ul li 将选择全部 li 元素，应当应用 only-of-type。

适配 IE9+

first-of-type 伪类能够选择某种元素的第1个同类元素。

以便更好自然地理解它的用法，如今思索1下怎样在下面的 HTML 构造选中取 List Item 2 ？

<div>  <p> My paragraph here. </p>  <ul>    <li> List Item 1 </li>    <li> List Item 2 </li>  </ul>  <ul>    <li> List Item 3 </li>    <li> List Item 4 </li>  </ul></div>

ul:first-of-type > li:nth-child(2) {  font-weight: bold;}

这段编码的意思是：最先选择第1个 ul 元素；随后选择在其中的全部立即子元素，也便是 li；最终选择第2个子元素。

p + ul li:last-child {  font-weight: bold;}

寻找 p 元素后第1个出現的 ul 元素，随后选择在其中的最终1个子元素。

ul:first-of-type li:nth-last-child(1) {  font-weight: bold;}

寻找第1个 ul 元素，随后从上往下选择第1个子元素。

适配 IE9+

一些伪类挑选器或伪元素是能够叠用的，比如：

#post p:nth-of-type(2):first-letter {  float: left;  margin: 0 5px 0 1em;  width: 1em;  height: 1em;  font-size: 2em;}

目测适配 IE9+，听闻 IE10 有个小 bug