css选择器 30,这30个CSS选择器，你必须熟记（下）

关注前端达人，与你共同进步php

在上两篇文章里，《这30个CSS选择器，你必需熟记(上)》和 《这30个CSS选择器，你必需熟记(中)》这两篇文章里，咱们一块儿学习了前20个，本篇文章咱们一块儿学习剩下的10个选择器。前端

2一、 X::pseudoElement 伪元素选择器

咱们可使用伪元素(用::表示)来定义某些片断元素，好比第一行或第一个字母。要记住的是这只能用于块状(block)元素。浏览器

好比咱们要匹配第一个字母：ide

p::first-letter {

float: left;

font-size: 2em;

font-weight: bold;

font-family: cursive;

padding-right: 2px;

}

上述代码会匹配全部的P标签，而后匹配全部段落开头的第一个字母。通常用于比较个性的相似杂志排版风格的网站。学习

好比咱们要匹配段落的第一行内容：字体

p::first-line {

font-weight: bold;

font-size: 1.2em;

}

这里使用::first-line来定义段落的第一行的样式。网站

为了兼容现有的样式标准，CSS1和CSS2里使用单冒号来表示伪元素(好比:first-line，:first-letter，:before和:after)spa

浏览器兼容性3d

IE6+code

Firefox

Chrome

Safari

Opera

2二、 X:nth-child(n) ：选择每第 n 个元素选择器

若是你要匹配一组序列元素每第几个元素，你可使用 :nth-child 选择器知足这个需求，要注意的是nth-child指序列里的第n个元素，从1开始。若是你要匹配第二个元素，可使用li:nth-child(2)。咱们甚至能够用按倍数进行匹配，好比选择全部4的倍数元素，li:nth-child(4n)。咱们经常使用这个作奇偶交替的样式，可是更经常使用的是这两个特殊的关键词字：even(偶数) 后 odd (奇数)

经常使用写法示例：

li:nth-child(3) {

color: red;

}

奇数样式匹配：

li:nth-child(odd) {

background: red;

}

浏览器兼容性

IE9+

Firefox 3.5+

Chrome

Safari

2三、 X:nth-last-child(n) ：从后往前计算选择每第 n 个元素选择器

X:nth-last-child(n) 与 X:nth-child(n) 相反，这里从后往前数，好比你的元素不少，你不会一个一个从前日后数吧，li:nth-child(397)，使用 nth-last-child 这个伪类更会方便些

代码示例：

li:nth-last-child(2) {

color: red;

}

浏览器兼容性

IE9+

Firefox 3.5+

Chrome

Safari

Opera

24. X:nth-of-type(n)：选择每第n个某种元素选择器

有时候你可能有这样的需求，想经过元素类型type进行选择，而不是子元素 child，你能够考虑 X:nth-of-type(n)，假设有5个无序列表。若是你想定义第三个ul的样式，但又没有id来进行匹配，那么可使用伪类nth-of-type(n)。你的代码能够这么写：

ul:nth-of-type(3) {

border: 1px solid black;

}

浏览器兼容性

IE9+

Firefox 3.5+

Chrome

Safari

25. X:nth-last-of-type(n)：从后往前计算选择每第n个某种元素选择器

好比咱们可使用nth-last-of-type来选择倒数第n个元素。以下段代码所示：

ul:nth-last-of-type(3) {

border: 1px solid black;

}

浏览器兼容性

IE9+

Firefox 3.5+

Chrome

Safari

Opera

26. X:first-child：第一个子元素选择器

这个选择器一般选择第一个子元素，咱们经常为第一个或者最后选项卡设置默认的视觉效果，好比去掉元素的边框，示例代码以下：

ul >li:first-child {

border-top: none;

}

假设你有一个序列，每一行的元素都有上边框border-top和下边框border-bottom。这样的话第一个和最后一个元素并不须要这么设置区分分割线。咱们会经过给第一个和最后一个元素添加样式来解决。稍后我会给到示例。

浏览器兼容性

IE7+

Firefox

Chrome

Safari

Opera

27. X:last-child：最后一个子元素选择器

有第一个子元素选择器，天然会有最后一个子元素选择器，示例代码以下：

ul > li:last-child {

color: green;

}

好比下面一个例子，咱们建立一个无序列表的样式，须要加上边框的深度，让层次更明显(分割线)，又不想让第一个元素上边框和最后一个元素下边框有线条的感受，这两个伪类就派上用场了，示例代码以下：

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;

}

li:first-child {

border-top: none;

}

li:last-child {

border-bottom: none;

}

• List Item
• List Item
• List Item

效果以下：

浏览器兼容性

IE9+

Firefox

Chrome

Safari

Opera

28：X:only-child ：选择惟一的子元素

这个伪类通常不经常使用，only-child可让你匹配惟一的子元素，好比，选择当div中只有一个p子元素的时候段落字体才是红色的，只要子元素超过一个就不会应用样式。示例代码以下：

div p:only-child {

color: red;

}

My paragraph here.

/*只有这行应用样式*/

Two paragraphs total.

Two paragraphs total.

浏览器兼容性

IE9+

Firefox

Chrome

Safari

Opera

29：X:only-of-type：匹配父元素里没有邻近兄弟元素的选择器

only-of-type会匹配父元素里没有邻近兄弟元素的子元素(即同胞中惟一的那种元素，没有兄弟)。例如，匹配全部只有一个列表元素的 li 和 div里只有一个p标签 让其应用样式，示例代码以下

div p:only-of-type {

color: red;

}

li:only-of-type {

font-weight: bold;

}

My paragraph here.

• List Item
• List Item

Two paragraphs total.

Two paragraphs total.

• List Item

示例效果以下：

浏览器兼容性

IE9+

Firefox 3.5+

Chrome

Safari

Opera

30：X:first-of-type：选择该类型的第一个元素选择器

咱们一般用这个选择器来选择该类型的第一个元素，为了更好的理解这个例子，咱们来看以下结构的HTML代码：

My paragraph here.

• List Item 1
• List Item 2

• List Item 3
• List Item 4

好比咱们有一个这样的需求? 怎么选中"List Item 2"。先别着急往下看？你会如何作呢？

实现的方法比较多，以下所示：

方案1

ul:first-of-type > li:nth-child(2) {

font-weight: bold;

}

上述代码，首先找到页面中的第一个无序列表，而后找到它的直接子元素，而后选择第二个元素。

方案2 ：

使用紧邻同胞选择器

p + ul li:last-child {

font-weight: bold;

}

上述代码先找到紧跟在p后面的ul，而后找到li序列的最后的元素。

方案3：

多种选择器的组合，示例代码以下：

ul:first-of-type li:nth-last-child(1) {

font-weight: bold;

}

上述咱们先找到页面的第一个ul，而后找到li序列的倒数第一个元素。

浏览器兼容性

IE9+

Firefox 3.5+

Chrome

Safari

Opera

小节

到这里，咱们终于学完了经常使用的30个CSS选择器，是否是轻松许多，感谢你们的阅读，熟记这30个选择最好的办法就是常常的使用，在实际中去理解和运用，印象才能深入。

专一分享当下最实用的前端技术。关注前端达人，与达人一块儿学习进步！

长按关注"前端达人"