学前端，这30个CSS选择器，你必需熟记

你学会了基本的id，class类选择器和descendant后代选择器，然后就以为完事了吗？假如如此，你就会错过很多机动运用CSS的时机。固然本文提到的很多选择器都属于CSS3，并且只能在古代的欣赏器中使用，但学会这些是大有利益的。

什么是CSS选择器呢？

每一条css样式界说由两局部构成，情势如下：[code]选择器{样式}[/code] 在{}之前的局部就是“选择器”。 “选择器”指明白{}中的“样式”的作用目标，也就是“样式”作用于网页中的哪些元素

1、*

* {
margin: 0;
padding: 0;
}

起首我们来熟悉一些简便的选择器，尤其针对初学者，然后再看其他高等的选择器。

星号可以用来界说页面的一切元素。很多开发者会使用这个本事来把margin和padding都设为0。在快速开发测试中这种设置固然是好的，但我发起相对不要在终极的产物代码中使用。由于会给欣赏器增长多量不必要的负荷。

星形*也可以用于子元素选择器（child selectors）。

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

这段代码会界说#container div一切子元素的样式。跟外表一样，假如可以尽力制止使用这个办法。

2. #X

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

使用＃号作为前缀可以选择该id的元素。这是最稀有的用法，但使用id选择器时要审慎。

问问本人：对否真的必要使用id来界说元素的样式？

id选择器比力范围，不克不及重用。假如可以的话，先实验使用标签称呼，HTML5的此中一个新元素，或使用伪类。

3. .X

.error {
color: red;
}

这是class类选择器。id和class类选择器的区别是，类选择器可以界说多个元素。当你想界说一组元素的样式时可以使用class选择器。别的，可以使用id选择器来界说某一个特定的元素。

4. X

li a {
text-decoration: none;
}

下一个最稀有的选择器是descendant后代选择器。当你必要更准确的定位时，可以使用后代选择器。比如，假定说你只想选择无序列表里的链接，而不是一切的链接？这种情况下你就应该使用后代选择器。

履历分享 – 假如你的选择器看起来像X Y Z A B.error如此就错了。问问本人对否真的必要到场这么多负荷。

5. X

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

假定你想界说页面里一切type标签典范一样的元素，而不使用id大概class呢？可以简便地使用元素选择器。好比选择一切的无序列表，可以用ul {}。

6. X:visited and X:link

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

我们使用:link伪类来界说一切还没点击的链接。

别的另有:visited伪类可以让我们给以前点击过大概拜候过的链接添加样式。

7、 X + Y

ul + p {
color: red;
}

这是临近元素选择器，只会选中紧接在另一个元素后的元素。这外表的示例中，仅有每个ul后方的第一个段落是赤色的。

8. X > Y

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

X Y和X > Y的区别是后者只会选中直接后代。比如，看看底下的代码：

<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>

#container > ul只会界说id为container的div里的ul元素，而不会界说第一个li里的ul。

因此，使用这种选择器的后果更佳。实践上，在JavaScript中尤其实用。

9.X ~ Y

ul ~ p {
color: red;
}

这种兄弟选择器跟X + Y很像，但没有那么严厉。临近选择器（ul + p）只会选择紧接在前一个元素后的元素，但兄弟选择器更广泛。好比，在外表的例子中，只需在ul后的p兄弟元素都市被选中。

10. X[href=”foo”]

a[title] {
color: green;
}

这种是属性选择器，在外表的例子中，带有title属性的链接标签才会被婚配。没有title属性的标签不会遭到影响。但假如想更具体地依据属性的值来选择，就持续往下看吧。

11. X[href=”foo”]

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

外表的代码界说了以是指向http://www.icodingedu.com的链接都是nettuts品牌的绿色。其他的链接不受影响。

注意我们把赋值放在引号内里，在JavaScript中选择元素的时分也要记取这么使用。尽约莫地使用CSS3标准的选择器。

这种办法不错，但照旧有点范围。万一链接也是指向Nettuts+，但途径是icodingedu.com而不是完备的途径呢？这种情况下我们可以使用正则表达式（regular expression）。

12. X[href*=”nettuts”]

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

处理了外表的成绩。星号表现赋值显如今属性的随意处。如此就界说了指向nettuts.com，net.tutsplus.com乃至tutsplus.com的链接。

要记取的是这种表达比力广泛。假定链接包含tuts但指向了不是Envato旗下的网站呢？假如你想更准确，可以使用^和$来婚配前缀和后缀。

13. X[href^=”http”]

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

你有想过有些网站是怎样在链接旁边加一个小图标指示这是外部链接吗？我信赖你一定有见过如此的小图标，它们标示着链接会导向到别的的网站。

这十分容易做到。通常使用正则表达式来指定字符串的前缀。假如我们想界说一切href属性前缀为http的链接标签，我们可以使用外表代码的选择器。

可以看到我们没有使用http://，由于没有必要，并且如此不克不及婚配以https://开头的url。

接下去，好比说我们要界说以是指向图片的链接又要怎样办呢？如此可以婚配字符串的后缀。

14. X[href$=”.jpg”]

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

再来，我们使用正则表达式标记$来表现字符串的后缀。在外表的例子中，我们将婚配以是指向图片或最少以.jpg开头的url。要记取的是固然这些样式对gif和png是没效的。

15. X[data-*=”foo”]

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

就像外表所说的，我们怎样婚配一切的图片，包含png，jpeg，jpg和gif？可以使用多个选择器。

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

但如此很贫苦，也很没有听从。另一种处理办法是使用自界说属性。好比在图片链接标签中添加data-filetype属性。

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

如此，我们就可以使用属性选择器来界说链接的样式。

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

16. X[foo~=”bar”]

a[data-info~="external"] {
color: red;
}

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

这个本事将会让小伙伴们对你刮目相看。并没有很多人晓得这个本事。波浪标记（~）可以让你界说取值带有空格的属性。

持续使用前方的自界说属性，创建data-info属性来婚配带有空格的取值。举个例子，这里我们婚配外部链接和图片链接。

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

使用外表的代码，如今我们可以用波浪号的本事来界说包含此中一个值的元素。

/* 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;
}

奇妙吧？

17. X:checked

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

很简便，这个伪类可以用来界说选中（checked）的元素，好比单选按钮（radio）或多选按钮（checkbox）。

18. X:after

伪类before和after属于高等用法。几乎每一天都有人找到高效而有创意的新用法。这两个伪类可以在元素前方和后方添加内容。

很多人熟悉到这两个伪类是由于这是扫除浮动的本事。

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

.clearfix {
*display: inline-block;
_height: 1%;
}

这个例子使用:after在元素后方添加距离和扫除浮动的元素。这是你值得拥有的高等本事，尤其是当overflow: hidden;不管用的时分。

依据CSS3选择器标准，语法上你应该使用双冒号来::来指定伪类。但是，为了兼容大多欣赏器，单冒号也被供认。实践上，在现在的情况下，使用单冒号的选择是明智的。

19. X:hover`

div:hover {
background: #e3e3e3;
}

好吧，这个你一定懂。正式的叫法是用户交互伪类user action pseudo class。听起来有些隐晦，但实践上并非云云。想给用户鼠标划过的元素添加样式？这就派上用场了！

要记取的是在旧版的IE里，:hover只能用于链接标签。

最稀有的用法是，好比，当鼠标划过链接，链接会显现下划线（border-bottom）。

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

履历分享 – border-bottom: 1px solid black;比text-decoration: underline;的后果更好。

20. X:not(selector)

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

否定伪类特别有效。假定我想选择一切 divs，除了 id 为 的谁人 container。外表的代码片断将完善地处理该职责。

大概，假如我想选择除段落标签之外的每个元素（不发起），我们可以如此做：

*:not(p) {
color: green;
}

21. X::pseudoElement

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

我们可以使用伪元素（用::表现）来界说某些片断元素，好比第一行或第一个字母。要记取的是这只能用于块状（block）元素。

伪元素使用两个冒号::。

底下婚配段落的第一个字母：

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

外表的代码会先找到一切的段落，然后婚配元素的第一个字母。

这常用于创建相似报纸文章的样式。

婚配段落的第一行

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

相似地，这里使用::first-line来界说元素的第一行的样式。

“为了兼容现有的样式标准，用户署理必需同时采取CSS1和CSS2里使用单冒号来表现伪元素的标准（好比:first-line，:first-letter，:before和:after）。但新的伪元素不兼容这种特列。 － 材料泉源”

22. X:nth-child(n)

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

还记得从前我们不成以婚配一组序列元素里的某个元素吗？nth-child伪元素就能处理这个成绩！

要注意的是nth-child指序列里的第n个元素，从1数起。假如你想婚配列表里的第二个元素，可以使用li:nth-child(2)。

我们乃至可以使用这种办法来选择一系列的子元素。好比li:nth-child(4n)可以选择排在4的倍数的元素。

23. X:nth-last-child(n)

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

假定你有一个无序列表内里有很多子元素，但你只想婚配第三到最初一个元素，那该怎样办？你可以使用伪类nth-last-child。

这个本事跟外表的一样，但是从聚集的最初一个数起。

24. X:nth-of-type(n)

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

偶尔分你约莫想经过元素的典范type来选择，而不是子元素child。

假定有5个无序列表。假如你想界说第三个ul的样式，但又没有id来举行婚配，那么可以使用伪类nth-of-type(n)。在外表的代码中，仅有第三个ul会有边框。

25. X:nth-last-of-type(n)

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

固然，我们也可以使用nth-last-of-type来选择倒数第n个元素。

26. X:first-child

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

这种伪类可以用于选中母元素的第一个子元素，常常用于去掉第一个或最初一个元素的边框。

比如，假定你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。如此的话第一个和最初一个元素看来起就没有那么划一。

很多计划师就会经过给第一个和最初一个元素添加样式来处理，但实践上可以使用这里提到的伪类。

27. X:last-child`

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

last-child是first-child的不和，可以婚配最初一个子元素。

示例

底下的例子展现了怎样使用这些伪类。先创建一个无序列表。

代码

<ul>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>

这是一个简便的列表。

CSS

ul {
width: 200px;
background: #292929;
color: white;
list-style: none;
padding-left: 0;
}

li {
padding: 10px;
border-bottom: 1px solid black;
border-top: 1px solid #3c3c3c;
}

这局部代码设置背景颜色，去掉欣赏器给ul设置的padding，然后给li加上边框增长深度。

给列表增长深度，可以给每个li添加比背景颜色深一点的下边框border-bottom。然后添加比背景颜色浅一点的上边框border-top。

唯一的成绩是，上图中无序列表的顶部和底部也会有边框，看起来有点奇异。可以用伪类:first-child和:last-child来处理。

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

li:last-child {
border-bottom: none;
}

如此就好了。

28. X:only-child

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

内幕上你很少会用到only-child这个伪类，但是当你必要的时分是可以使用的。

only-child可以让你婚配唯一的子元素。比如，在外表的代码中，仅有当div仅有一个p子元素的时分段落字体才是赤色的。

再看底下的代码。

<div><p> My paragraph here. </p></div>

<div>
<p> Two paragraphs total. </p>
<p> Two paragraphs total. </p>
</div>

在这种情况下，第二个div内里的段落不会被选中，仅有第一个div的段落才被选中。只需母元素含有凌驾一个子元素，only-child伪类就会没效。

29. X:only-of-type

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

这个伪类有几种不同的用法。only-of-type会婚配母元素里没有临近兄弟元素的子元素。比如，婚配一切仅有一个列表元素的ul。

起首想想要怎样做？你可以使用ul li，但如此会婚配一切无序列表的元素，如此only-of-type就是唯一的处理办法。

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

30. X:first-of-type

first-of-type可以用来选择该典范的第一个元素。

练习

为了更好地域解，我们来做一个练习。拷贝底下的代码粘贴到你的代码编纂器里：

<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>

如今，无需进一步阅读，实验找出怎样仅定位 “List Item 2”。当您弄清晰（或丢弃）后，请持续阅读。

处理方案 1

有多种办法可以处理此测试。我们将查察此中的一些。让我们从使用 first-of-type.

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

这个片断实质上说，要找到页面上的第一个无序列表，然后只找到直接子项，它们是列表项。接下去，将其过滤到该聚集中的第二个列表项。

处理方案 2

另一种选择是使用相邻选择器。

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

在这种情况下，我们找到 ul 立刻实行 p 标志的 ，然后找到元素的最初一个子元素。

处理方案 3

使用这些选择器，我们可以为所欲为地变得厌恶或好玩。

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

这一次，我们抓取 ul 页面上的第一个，然后找到第一个列表项，但从底部开头！

结论

假如你想兼容旧的欣赏器，好比IE6，在使用这些新的选择器时必要愈加注意。但是不要让旧欣赏器拦阻你做新的实验。可以参考欣赏器兼容性列表。别的可以使用Dean Edward的E9.js。

别的，当使用JavaScript类库的时分，好比jQuery，尽约莫地使用原生的CSS3选择器。如此可以增速代码的运转速率，由于选择器引擎使用欣赏器内置的剖析器，速率更快。

感激阅读，渴望你能有所劳绩！假如学习有成绩，可以私聊我们！