详解CSS3的高级选择器

CSS是对网页设计师可用的最强大的工具之一。使用它咱们能够在几分钟内改变一个网站的界面，而不用改变页面的标签。可是尽管事实上，咱们每一个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候咱们还趋向于使用过多的和无用的class、id、div、span等把咱们的HTML搞的很凌乱。

避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们能够定位于指定的元素而不用使用额外的class或id，并且经过这种方式也可让咱们的代码和样式更加灵活。

CSS的优先级

在深刻研究高级CSS选择器领域以前，理解CSS优先级是如何工做的是很重要的，这样咱们就知道如何适当的使用咱们的选择器并避免浪费大量的时间来调试一些只要咱们注意到优先级的话就很容易被搞定的问题

当咱们写CSS的时候咱们必须注意有些选择器在级联(cascade)上会高于其它选择器，咱们写在最后面的选择器将不必定会覆盖前面咱们写在同一个元素的样式。

那么你如何计算指定选择器的优先级？若是你考虑到将优先级表示为用逗号隔开的四个数字就会至关简单，好比：1, 1, 1, 1 或0, 2, 0, 1

1. 第一个数字(a)一般就是0，除非在标签上使用style属性；
2. 第二个数字(b)是该选择器上的id的数量的总和；
3. 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(好比 li[id=red])；
4. 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
5. 通用选择器(*)是0优先级；
6. 若是两个选择器有一样的优先级，在样式表中后面的那个起做用。

让咱们看几个例子，这样或许比较容易理解些：

• #sidebar h2 — 0, 1, 0, 1
• h2.title — 0, 0, 1, 1
• h2 + p — 0, 0, 0, 2
• #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起做用，由于它比第二个优先级高：

• #sidebar p#first { color: red; } — 0, 2, 0, 1
• #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

至少基本理解优先级是如何工做的是很重要的，可是一些工具好比Firebug，在咱们审查指定元素的时候，按照选择器的优先级列出全部的css选择器对让咱们知道在指定元素上哪一个选择器是有效的是颇有用的。

 
让你很是容易的看到那个选择器做用于一个元素上了。

有用的文章:

• CSS Specificity: Things You Should Know
• Link Specificity?MeyerWeb
• CSS: Specificity Wars
• Assigning property values, Cascading, and Inheritance—W3C

1. 属性选择器

属性选择器(Attribute selector)让你能够基于属性来定位一个元素。你能够只指定该元素的某个属性，这样全部使用该属性——而无论它的值——的这个元素都将被定位，也能够更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展现它们的威力的地方。

有6个不一样类型的属性选择器：

• [att=value]
  该属性有指定的确切的值。
• [att~=value]
  该属性的值必须是一系列用空格隔开的多个值，(好比，class=”title featured home”)，并且这些值中的一个必须是指定的值”value”。
• [att|=value]
  属性的值就是“value”或者以“value”开始并当即跟上一个“-”字符，也就是“value-”。(好比lang=”zh-cn”)
• [att^=value]
  该属性的值以指定值开始。
• [att$=value]
  该属性的值包含指定的值(而不管其位置)。
• [att*=value]
  该属性的值以指定的值结束

好比，若是你想要改变你的博客上的日志部分元素的背景颜色，你可使用一个指定每个class属性值以“post-”开始的div的属性选择器：

div[class|="post"] {   background-color: #333;   }

1. 1

代码laycode - v1.1

该语句将匹配全部class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)

属性选择器的另外一个颇有用的用处是定位不一样类型的input元素。好比，若是你想让你的文本输入框使用一个特定的宽度，你可使用下面的属性选择器：

input[type="text"] {   width: 200px;   }

1. 1

代码laycode - v1.1

这将匹配全部type属性值等于“text”的input元素。

如今咱们可能像为网站上不一样的文件类型的连接添加不一样的图标，这样你的网站的访客就会知道他们将得到一个图片、或者PDF文件、或者是一个word文档等。这就可使用属性选择器来实现：

a[href*=".jpg"] {   background: url(jpeg.gif) no-repeat left 50%;   padding: 2px 0 2px 20px;   }     a[href*=".pdf"] {   background: url(pdf.gif) no-repeat left 50%;   padding: 2px 0 2px 20px;   }     a[href*=".doc"] {   background: url(word.gif) no-repeat left 50%;   padding: 2px 0 2px 20px;   }

1. 1
2. 2
3. 3
4. 4
5. 5

代码laycode - v1.1

在此例中，咱们使用了一个定位全部的连接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察以前的一篇文章《使用CSS选择器建立个性化连接样式》

浏览器支持

除了Internet Explorer 6，全部的主流浏览器都支持属性选择器。这意味着，若是你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能得到一个可用的网站。好比咱们的第三个例子，为连接添加图标能够给你的网站带来另外一个级别的可用性，可是若是这些连接不显示任何图标，该网站仍然仍是可用的。

2. 子选择器

子选择器用符号“>”表示。它容许你定位某个元素的第一级子元素。

好比，若是你想匹配全部的做为你的网站侧栏的div的子元素的h2元素，而不是多是在div元素内的全部h2元素，也不是div的孙元素(或者更低级别的)，你就可使用下面的选择器：

div#sidebar > h2 {   font-size: 20px;   }

1. 1

代码laycode - v1.1

你固然也能够同时使用子元素和后代元素。好比，若是你想定位只有在body元素的子级div元素内的blockquote元素(好比你想匹配主要的div内的blockquotes，而不是其它部分的：

body > div > div blockquote {   margin-left: 30px;   }

1. 1

代码laycode - v1.1

浏览器支持

和属性选择器同样，子选择器不被IE6支持。若是你经过这种方式要实现的效果和网站的可用性或整体设计息息相关，你能够考虑使用一个class，或者使用只针对IE6的样式，可是这将有悖使用子选择器的目的。

3. 兄弟组合

有两类兄弟组合：临近兄弟组合和普通兄弟组合

临近兄弟组合

该选择器使用加号“+”来连接先后两个选择器。选择器中的元素有同一个父亲，并且第二个必须牢牢的跟着第一个。

临近兄弟组合能够灰常有用，好比，在处理文字的时候。好比咱们想对段落后面的h2标题添加一个顶间距“margin-top”(固然或许你无需为h1标签后面的h2添加，或者它多是页面的第一个元素)：

p + h2 {   margin-top: 10px;   }

1. 1

代码laycode - v1.1

你甚至能够更加具体，你想定位某个特定的div后面的h2：

div.post p + h2 {   margin-top: 10px;   }

1. 1

代码laycode - v1.1

或者你能够搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母。

.post h1 + p:first-line {   font-variant: small-caps;   }

1. 1

代码laycode - v1.1

由于可能大部分日志/文章的第一个段落都会牢牢的在H1标签的后面。你能够在你的选择器中借助于h1标签。

普通兄弟组合

普通兄弟组合和临近兄弟组合的工做原理很像，不一样的是第二个选择其无需牢牢跟随第一个。

若是你须要定位全部的某个特定的div里面而且跟在h1标签后面的p标签的话(你可能想要这些p标签比拟的日志的标题前面的文字大些)，你就可使用这个选择器：

.post h1 ~ p {   font-size: 13px;   }

1. 1

代码laycode - v1.1

注：这两个选择器太像了，全部不是很好理解，能够试一试下面的这个例子：

CSS:

p + h2{color:red;   }   p ~ h2{font-weight:700;   }

1. 1

代码laycode - v1.1

HTML:

<p>咳咳，内容。</p>  <h2>标题1</h2>  <h2>标题2</h2>

1. 1

代码laycode - v1.1

看看第二个h2的颜色就能够理解了吧？临近兄弟组合只能匹配第一个选择器后面的第一个兄弟选择其，普通兄弟组合则能匹配全部。注：该部分英文原文没有，是神飞翻译时本身添加。

浏览器支持

Internet Explorer 6依然不能理解兄弟选择器，可是，另外一种状况，若是你的用户中只有一小部分是IE6用户，并且网站的结构不会被破坏或者受到严重影响，这是实现不少很酷的效果而无需在你的HTML代码中添加无用的class或id。

4. 伪类

动态伪类

之因此被称为动态伪类是由于它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类：连接 和用户行为。连接就是:link 和:visited，而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中，这几个应该是最经常使用到的。

:link伪类用于连接还没有被用户访问的时候，而:visited 伪类用于用户访问过的连接，也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上，而还没有触发或点击它的时候。:active伪类应用于用户点击元素的状况。最后，:focus伪类用于元素成为焦点的时候——最经常使用于表单元素。

你能够在你的样式表中使用多种用户行为动态伪类，这样你就能够，好比，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不一样的背景色:

input:focus {   background: #D2D2D2;   border: 1px solid #5E5E5E;   }  input:focus:hover {   background: #C7C7C7;   }

1. 1
2. 2

代码laycode - v1.1

浏览器兼容性

动态伪类被全部的现代浏览器支持，甚至IE6，可是请注意，对于IE系列浏览器来讲，IE6只容许:hover 伪类应用于连接元素(a标签)并且只有IE8接受:active状态。

:first-child

:first-child伪类容许你定位某个元素第一个子元素。好比，若是你想给你的无须列表的第一个li添加一个margin-top，你就能够这样写：

ul > li:first-child {   margin-top: 10px;   }

1. 1

代码laycode - v1.1

让咱们来看一看另外一个例子:好比你想让你的博客的侧栏的H2标签都有个顶部边距，以将标题和它们前面的内容区分开来，可是第一个h2不须要，你就可使用下面的代码：

#sidebar > h2 {   margin-top: 10px;   }     #sidebar > h2:first-child {   margin-top: 0;   }

1. 1
2. 2

代码laycode - v1.1

浏览器兼容性

IE6 不支持 :first-child 伪类。根据伪类应用到的设计的不一样，它或许不会成为关注的主要问题。好比，若是你使用:first-child 选择器来移除标题或段落上的头部或底部的间距，你的布局在IE6中不会坏掉，它只会看起来有些不一样。可是若是你使用:first-child选择器从一个，好比浮动元素，移除左边距或右边距，将会让你的设计乱掉。

语言伪类

语言伪类:lang()，容许你匹配一个基于它的语言的元素。

你如，你想让你的网站的某个特定的连接根据页面的语言有不一样的背景颜色：

:lang(en) > a#flag {   background-image: url(english.gif);   }     :lang(fr) > a#flag {   background-image: url(french.gif);   }

1. 1
2. 2

代码laycode - v1.1

这个选择器将会匹配相关的连接——若是页面的语言等于“en”或“fr”，或者以“en”或“fr”开头并在后面带个连字符“-”的话。

浏览器兼容性

不幸的是，只有IE浏览器中只有IE8支持该选择器，其它的主要浏览器都支持该伪类选择器。

5. CSS 3 伪类

:target

当你使用锚点(片断标识符 fragment identifier)的时候，好比，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这“#comments”就是一个片断标识符，你就可使用:target伪类来控制目标的样式。

举个例子，好比你有一个很长的使用了不少文字和h2标题的页面，而后在页面的头部有一个对这些标题的索引。若是在点击索引内的某个连接时，相应的标题以某种方式高亮，而后滚动到相应的位置，对读者就会颇有用。很简单。

h2:target {   background: #F2EBD6;   }

1. 1

代码laycode - v1.1

浏览器兼容性

这一次，IE浏览器彻底不支持:target伪类，另外一个小问题就是Opera 在使用“前进”和后退按钮时不支持该选择器。可是其它的各个主流浏览器都支持该选择器。

UI元素状态伪类

有些HTML元素有enable 或disabled 状态(好比，文本输入框)和 checked 或unchecked 状态(单选按钮和复选框)。这些状态就可使用:enabled、:disabled 或:checked 伪类来分别定位。

那么你就会想，若是任意一个禁用的(disabled)文本框应该使用浅灰色的背景和虚线边框：

input:disabled {   border:1px dotted #999;   background:#F2F2F2;   }

1. 1

代码laycode - v1.1

你也可能会想让全部选中的复选框有个左边距(这样就能够在众多的复选框中很容易认出来)：

input[type=”checkbox”]:checked {   margin-left: 15px;   }

1. 1

代码laycode - v1.1

浏览器兼容性

全部的主流浏览器，除了咱们经常不报但愿的IE系列浏览器，都支持UI元素状态伪类。若是你考虑只是添加附加级别的细节和加强网站的可用性，这个仍然是能够采用的。

6. CSS 3 结构伪类

:nth-child

:nth-child()伪类容许你定位某个父级元素的一个或多个特定的子元素.

你能够经过定义它的值为一个整数来定位某个单个子元素：

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

1. 1

代码laycode - v1.1

这将会让ul元素的第三个li元素的文字变成红色。注意若是在ul里面有个其它类型的元素(不是li)，它也会算做其子元素。

你可使用表达式来定位子元素。好比，下面的表达式将从第四个开始匹配每第三个元素。

ul li:nth-child(3n+4) {   color: yellow;   }

1. 1

代码laycode - v1.1

在上面的这个例子中，第一个黄色的li元素将会是第四个。若是也想从第一个开始匹配，你可使用一个简单的表达式：

ul li:nth-child(3n) {   color: yellow;   }

1. 1

代码laycode - v1.1

这样的话，第一个黄色的li元素将会是第三个子元素，而后是它后面的每隔第三个。如今想象一下若是你只想匹配列表中的前四个子元素：

ul li:nth-child(-n+4) {   color: green;   }

1. 1

代码laycode - v1.1

:nth-child的值一样也能够被定义为“even” 或“odd”，和“2n” (第偶数个) 或“2n+1” (第奇数个)的效果是同样的。

:nth-last-child

:nth-last-child伪类基本上和:nth-child伪类的做用相同，可是它从最后一个元素开始算。

使用上面的一个例子来看看：

ul li:nth-child(-n+4) {   color: green;   }

1. 1

代码laycode - v1.1

不是匹配最前面的四个li元素，该选择器匹配最后面的四个元素。

你一样可使用“even” 或“odd”只，一样与nth-child不一样的是，这是从最后面的元素开始算的：

ul li:nth-last-child(odd) {   color: grey;   }

1. 1

代码laycode - v1.1

:nth-of-type

:nth-of-type伪类和:nth-child也很像，不一样的是它只计算选择器中指定的那个元素。

这对定位元素中包含大量不一样的元素的状况会颇有用。好比，咱们想控制一个文本块中的每隔一个段落，可是咱们又想要无视其它元素好比图片和引用块：

p:nth-of-type(even) {   color: blue;   }

1. 1

代码laycode - v1.1

你也可使用一些值，就像在:nth-child中使用的同样。

:nth-last-of-type

你能猜到它吧？！:nth-last-of-type 伪类能够像前面提到的:nth-last-child同样使用，可是此次，它将之匹配你在选择器中指定的元素类型：

ul li:nth-last-of-type(-n+4) {   color: green;   }

1. 1

代码laycode - v1.1

咱们能够更加的聪明一些，在一个大的块级选择器中结合多种这样的伪类。好比咱们想让文章中的全部的图片左浮动，除了第一个和最后一个(咱们能够假设他们是满宽的，无须浮动)：

.post img:nth-of-type(n+2):nth-last-of-type(n+2) {   float: left;   }

1. 1

代码laycode - v1.1

因此在这个选择器的第一部分，咱们从第二个图片开始定位每个图片。在第二部分中，咱们定位全部的图片，除了最后一个。由于这两个选择器并不是互斥的，咱们能够同时使用它们，这样就能够一会儿排除第一个和最后一个元素！

:last-child

:last-child伪类的做用相似于:first-child 伪类，可是会定位父级元素的最后一个子元素。

让咱们假设你不想让你的日志的div的最后一个段落也有一个底部边距：

.post > p:last-child {   margin-bottom: 0;   }

1. 1

代码laycode - v1.1

该选择器将定位class为”post”的元素的最后一个直接子级段落。

:first-of-type 和:last-of-type

:first-of-type 伪类用于定位一个父级元素下的第一个同类子元素。

好比，你能够定位某个特定的div的第一个子级段落(p)，并让其第一行字母大写:

.post > p:first-of-type:first-line {   font-variant: small-caps;   }

1. 1

代码laycode - v1.1

在这个选择器中，你能够肯定你是在只定位class为”post”的元素的直接子级p元素，并且仍是匹配第一个子级p元素。

:last-of-type伪类与此相似，只是匹配最后一个子元素。

only-child

o nly-child伪类表示一个元素是它的父级元素的惟一一个子元素。

好比说，你有一些盒子(“news”)，里面有一些文字段落，当你有多于一个段落的时候，你想让文字比只有一个段落的时候小一些：

div.news > p {   font-size: 1.2em;   }     div.news > p:only-child {   font-size: 1.5em;   }

1. 1
2. 2

代码laycode - v1.1

第一个选择器中，咱们定义”news”div的全部子级p元素的字体大小。在第二个中，咱们覆盖以前的字体大小，若是该p元素是“news” div的惟一子元素的时候，它的字体大小会比较大一些。

only-of-type

only-of-type伪类表示一个元素是它的父级元素的惟一一个相同类型的子元素。

这有用什么用？假设你有一些日志，每一篇都有个class为”post”的div，他们中的一些有多于一张图片，可是有些可能就只有一张图片。你想让后者中的图片水平居中，而在其它的有多于一张图片的日志中，就将它左浮动。这个需求用这个选择器就很容易实现：

.post > img {   float: left;   }     .post > img:only-of-type {   float: none;   margin: auto;   }

1. 1
2. 2

代码laycode - v1.1

:empty

:empty伪类表示一个元素里面没有任何内容。

这个选择器能够用不少种用途。好比，你在你的“sidebar”中有若干个盒子，可是不想让空盒子显示出来：

#sidebar .box:empty {   display: none;   }

1. 1

代码laycode - v1.1

注意，就算”box”div里面只有一个空格，它也不会被css看成空标签的，这样就不能匹配该选择器了。

浏览器支持

Internet Explorer (直到8.0版本)都不支持结构伪类。Firefox、Safari 和Opera 在其最新版本的浏览器中指出这些选择器。这意味着，使用这些选择器对网站的可用性和可访问性是颇有用的，或者若是网站的用户中的大部分是使用IE并且你不想在某些细节上无视他们，最好仍是保持使用通用的class和简单的选择器来迎合这些选择器。不然你会被搞疯的！

7. 否认选择器

否认选择器:not()，可让你定位不匹配该选择器的元素

好比，若是你须要定义表单元素中的input元素，可是又不想包括submit类型的input的时候会灰常有用——你想它们有不一样的样式，以看起来像按钮：

input:not([type="submit"]) {   width: 200px;   padding: 3px;   border: 1px solid #000000;   }

1. 1
2. 2

代码laycode - v1.1

另外一个例子，你想你的日志的div中的全部段落(p)有比较大的字体，除了表示时间和日期的段落：

.post p:not(.date) {   font-size: 13px;   }

1. 1

代码laycode - v1.1

你能够想象这个选择器能带给你的潜力了吧，你可以从你的CSS文件中剥离(剔除)的无用的大量选择器也被它普遍支持吗？

浏览器支持

Internet Explorer在这里经常是让咱们感到扫兴的东西：一点都不支持，甚至在IE8中。这大概意味着这些选择器将仍不得不等到一些开发者开始再也不顾虑将它添加到他们的样式表中才会普及。

8. 伪元素

伪元素容许你操做HTML中不是真实存在的元素，好比一个文本块的第一行或者第一个字母。

伪元素在CSS 2.1中就已经存在，可是CSS 3说明书表示他们应该使用双冒号“::”，以与伪类区分开来。在CSS 2.1中，他们也是使用单个冒号“:”的。浏览器会将可以接受两种格式，除非这些伪元素只存在于CSS3中。

::first-line

::first-line伪元素将匹配block、inline-block、table-caption、table-cell等等级别元素的第一行

这对在你的文字块上添加一些微妙的排版细节至关有用，好比，将一片文章的第一行文字改为小写字母：

h1 + p::first-line {   font-variant: small-caps;   }

1. 1

代码laycode - v1.1

若是你专心的阅读了咱们前面的内容，你将会了解到上面的语法意味着，牢牢的跟在H1标签以后(+)的段落会将其第一行文字显示为小写字母。

你也能够针对相关的div的第一行，而不用针对实际的段落标签(p):

div.post p::first-line { font-variant: small-caps; }

1. 1

代码laycode - v1.1

或者更进一步，定位某个特低的div的第一个段落的第一行：

div.post > p:first-child::first-line {   font-variant: small-caps;   }

1. 1

代码laycode - v1.1

这里，“>”符号表示你指定的是post div的直接子级元素，这样若是段落被包括在第二级div中，它就不会匹配这个选择器。

::first-letter

::first-letter伪元素将会匹配一个文本块的第一个字母，除非在同一行里面包含一些其它元素，好比图片。

和::first-line伪类同样，::first-letter一般用于给文本元素添加排版细节，好比下沉字母或首字母。

这里是如何使用::first-letter伪元素建立首字下沉的例子:

p {   font-size: 12px;   }     p::first-letter {   font-size: 24px;   float: left;   }

1. 1

代码laycode - v1.1

注意若是你在某些元素中同时使用::first-line 和::first-letter ，::first-letter 属性将覆盖从::first-line中继承下来的某些属性。

若是你不知道W3C规则的话，这个元素有时会产生意想不到的结果：它事实上是使用最长的规则的选择器！因此若是你计划使用它的话最好仔细的阅读一下 (其它选择器也同样)。

::before 和 ::after

::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。

这些元素将继承它们将附加的元素的大部分属性。

假设你想在你的页面中的图标的描述前面添加文字“Graphic number x:”。你将无需写文字“Graphic number”，或者本身手动添加数字：

.post {   counter-reset: image;   }     p.description::before {   content: "Figure number " counter(image) ": ";   counter-increment: image;   }

1. 1
2. 2

代码laycode - v1.1

那么这会产生什么？

首先，咱们告诉HTML来建立“image”计数器。好比咱们能够添加该属性到页面的body。一样咱们也能够给该计数器起任何一个名字，只要你想，只要咱们经常使用一样的名字引用它：本身试试吧！

那么咱们想在class为”description”的每个段落以前添加这一块内容: “Figure number ” — 注意只有咱们在引号里面写的内容才会被建立到页面中，因此咱们也要添加一个空格！

而后，咱们就有了counter(image):这将用到咱们以前在.post选择器中定义的属性。它默认会从数字1开始。

下一个属性在那里表示计数器知道对于每个p.description，它须要将image计数器增长1 (counter-increment: image)。

它并不像看起来的那么复杂，并且还会灰常的有用。

::before和::after伪元素经常只使用content属性，来添加一些短语或排版元素，可是这里咱们展现了咱们若是以一种更增强大的结合counter-reset和counter-increment属性的方式来使用它们。

有趣的是: ::first-line 和::first-letter 伪元素能够匹配使用::before伪元素生成的内容，若是存在的话。

浏览器支持

若是使用单个冒号的话(好比, :first-letter, 而不是::first-letter)，这些伪元素被IE8支持(可是不被IE7或6支持)。可是左右其余的主流浏览器都支持这些选择器。

结语

乏味的讲述终于结束了，如今该你来领悟本文的要义并本身尝试了: 开始经过建立实验性的页面并测试全部的这些选择器，在有疑问的时候返回这里并确保老是遵循W3C的规则，可是请不要只是坐在那里想这些选择器还没有被彻底支持你就无视它们。

若是你勇于冒险，或者你不惧怕放弃以前的遍地无用和非语义化的class和id，为何不尝试一两个这些强大的CSS选择器到你的下一个项目中呢？咱们保证你不会回头的！