你不可不知的常用 CSS 选择器
CSS 选择器除了样式表匹配元素时需要用到，在使用 jQuery 等库的时候也可以利用 CSS 选择器来选择元素，因此作为前端开发需要熟练掌握。下面是一些常用的 CSS 选择器示例。
元素选择器
E，选择所有指定元素名称的元素，例如 p，选择所有的 p 元素。
元素叫什么名字，选择器就怎么写，比如
<p>Profile</p>
p {
color: #333;
}
通用选择器
*，选择所有元素，例如：
* {
box-sizing: border-box;
}
所有元素都会匹配到
类选择器
.class，用一个点号加类名表示，例如 .header，选择所有 class 属性中包含 header 的元素。
<div class="header">匹配</div>
<h2 class="header title">匹配</h2>
.header {
color: #333;
}
元素限定类选择器
h2.header {
/* 选择具有 header 类的 h2 元素 */
}
多类选择器
使用多个 class 可以选择同时含有多个类名的元素，例如 .collapse.in 选择同时含有类 collapse 和 in 的元素：
<div class="collapse in">匹配</div>
<div class="collapse"></div>
<div class="in"></div>
.collapse.in {
color: red;
}
IE 6 浏览器不支持多类选择器，会忽略多类中前面的类，比如这里 IE 6 只会匹配 .in。
ID 选择器
#id，用一个 # 号加 ID 值表示，例如 #title，选择 id 属性等于 title 的元素。
<h2 id="title"></h2>
#title {
color: #333;
}
ID 具有唯一性，同一个页面不能出现两个相同 ID 值的元素
元素限定 ID 选择器
h2#title {
/* 选择 id 属性等于 title 的 h2 元素 */
}
上下文选择器
selector selector，用于选择元素内部的元素，例如 p span，选择所有属于 p 元素内部的 span 元素。
<p>
<span>匹配</span>
<strong>
<span>匹配</span>
</strong>
</p>
<span>不匹配</span>
p span {
color: #333;
}
只要是后代元素都可以匹配
子元素选择器
selector > selector，用于匹配带有特定父元素的元素，例如 .list > li，选择所有父元素的 class="list" 的 li 元素。
<ul class="list">
<li>父元素具有 list 类会匹配</li>
<li>
<ul>
<li>父元素没有 list 类不会匹配</li>
</ul>
</li>
</ul>
.list > li {
padding: 10px;
}
相邻元素选择器
selector + selector，用于选择一个特定元素之后紧跟的元素，h2 + p，选择所有相邻 h2 元素之后的同级 p 元素。
<div>
<p></p>
<h2></h2>
<p>匹配</p>
<p></p>
</div>
h2 + p {
color: #333;
}
只能匹配当前元素之后的相邻元素，不能匹配之前的
同级元素选择器
selector ~ selector，用于选择特定元素之后的同级元素，h2 ~ p，选择所有 h2 元素之后的同级 p 元素。
<div>
<p></p>
<h2></h2>
<p>匹配</p>
<span></span>
<p>匹配</p>
<div>
<p></p>
</div>
</div>
h2 ~ p {
color: #333;
}
同级元素选择器比相邻元素选择器范围更大，同级元素选择器选择特定元素之后的所有同级元素，而相邻元素选择器只选择特定元素之后紧邻的那个元素。
属性名选择器
[attribute]，用于选择所有带有特定属性的元素，例如 [title]，选择所有带有 title 属性的元素。
<a title="link">匹配</a>
<a title>匹配</a>
<a></a>
[title] {
color: #333;
}
属性值选择器
属性选择器类似于类选择器，类选择器其实就是属性选择器的一种特例
[attribute="value"]，用于选择所有带有特定属性和值的元素，例如 [title="link"]，选择所有带有 title 属性并且值为 link 的元素。
<a title="link">会匹配</a>
<a title="this is a link">属性值不一致，不会匹配</a>
[title="link"] {
color: #333;
}
属性值的引号可以省略，无论单引号还是双引号效果是一样的
[attribute~="value"]，用于选择所有带有特定属性并且属性值包含指定单词的元素，单词之间用空格分隔，例如 [title~="link"]，选择所有带有 title 属性并且属性值中包含 link 单词的元素。
<a title="link">会匹配</a>
<a title="this is a link">属性值中包含 link 会匹配</a>
<a title="thisisalink">不会匹配</a>
<a title="other">不会匹配/a>
[title~="link"] {
color: #333;
}
[attribute|="value"]，用于选择带有特定属性并且属性值是以指定值开头的所有元素，该值必须是整个单词，或者后面跟着连字符，例如 [title|="red"]，选择所有带有 title 属性并且值是 red 开头的元素。
<a title="red">匹配</a>
<a title="red-hot">匹配</a>
<a title="redhot"></a>
[title|="red"] {
color: #333;
}
[attribute^="value"]，用于选择带有特定属性并且属性值是以指定字符串开头的所有元素，例如 a[href^="http://"]，选择所有 href 属性值以 http:// 字符串开头的 a 元素。
<a href="http://www.baidu.com/">匹配</a>
<a href="/index"></a>
a[href^="http://"] {
color: #333;
}
[attribute$="value"]，用于选择带有特定属性并且属性值是以指定字符串结尾的所有元素，例如 img[src$=".png"]，选择所有 png 格式的 img 元素。
<img alt="logo" src="/assets/logo.png"> <!-- 匹配 -->
<img alt="banner" src="/assets/banner.jpg">
img[src$=".png"] {
border: 1px solid #ccc;
}
[attribute*="value"]，用于选择带有特定属性并且属性值包含指定字符串的所有元素，例如 [title*="red"]，选择所有带有 title 属性并且值包含 red 字符串的所有元素。
<a title="red">匹配</a>
<a title="redhot">匹配</a>
<a title="hotredhot">匹配</a>
[title*="red"] {
color: red;
}
属性选择器对比
| 选择器 | 属性值 |
|---|---|
| [attribute] | 仅匹配属性名，与属性值无关 |
| [attribute="value"] | 完全匹配属性名和属性值 |
| [attribute~="value"] | 属性值以空格分隔，包含 value 单词或者仅为 value |
| [attribute|="value"] | 属性值以 value- 开头或者仅为 value |
| [attribute^="value"] | 属性值以 value 字符串开头 |
| [attribute$="value"] | 属性值以 value 字符串结尾 |
| [attribute*="value"] | 属性值包含 value 字符串 |
多属性混合选择器
<a href="https://sss.com/a.html">匹配</a>
<a href="http://sss.com/a.html"></a>
<a href="https://sss.com/a.php"></a>
/* href 属性以 https 开头并以 .html 结尾的 a 元素 */
a[href^="https"][href$=".html"] {
color: red;
}
伪类
否定伪类选择器
:not(selector)，选择所有不匹配括号中选择器的元素，例如 :not(p)，选择所有不为 p 的元素：
<p></p>
<span>匹配</span>
:not(p) {
color: red;
}
要同时否定多个条件，可以多次使用否定伪类选择器，只有同时满足条件的元素才会匹配：
<div class="foo bar"></div>
<div class="foo"></div>
<div class="bar"></div>
<div>匹配</div>
:not(.foo):not(.bar) {
/* 选择既没有 foo 也没有 bar 的元素 */
color: red;
}
两者的区别
<div class="foo bar"></div>
<div class="foo">匹配</div>
<div class="bar">匹配</div>
<div>匹配</div>
:not(.foo.bar) {
/* 选择不同时含有 foo 和 bar 的元素 */
color: red;
}
状态伪类选择器
状态伪类选择器会根据元素的特定状态选择相应的元素。
| 选择器 | 说明 | 例子 |
|---|---|---|
| :link | 选择所有未被访问的链接 | a:link |
| :visited | 选择所有已被访问的链接 | a:visited |
| :focus | 选择获取焦点的元素 | input:focus |
| :hover | 择鼠标指针位于其上的元素 | li:hover |
| :active | 选择激活的元素 | button:active |
:target，选择目标元素。当用户点击一个指向页面中其它元素的链接，则那个被指向的元素就是目标元素，例如：
<a href="#more">more</a> <!-- 点击这个链接之后 -->
<div id="more">...</div> <!-- 这个元素会被 :target 选择器匹配 -->
或者直接在地址栏输入对应的 hash 值也可以使对应的元素成为目标
:enabled，选择已启用的控件元素。
<input type="text"> <!-- 控件元素默认就是启用状态，匹配 -->
<input disabled type="text">
:disabled，选择被禁用的控件元素，和 :enabled 相反，
给禁用的文本输入框一个灰色的背景：
<input type="text">
<input disabled type="text"> <!-- 匹配 -->
input[type="text"]:disabled {
background-color: #eee;
}
:disabled 仅仅针对表单控件类元素有作用，对非表单控件类元素无效
而 [disabled] 属性选择器对所有元素都可以起作用，毕竟任意元素都可以添加一个 disabled 属性，哪怕它并没有任何效果
:checked，选择所有已经被勾选的单选框或者复选框：
<input checked type="radio"> <!-- 匹配 -->
<input type="checkbox"> <!-- 不匹配 -->
结合属性选择器选择被勾选的单选框：
<input checked type="radio"> <!-- 匹配 -->
<input checked type="checkbox"> <!-- 不匹配 -->
input[type="radio"]:checked {
height: 18px;
}
:checked 和 [checked] 的区别同 disabled
选择未被勾选的需要结合否定伪类选择器一起使用：
input[type="radio"] {
/* 选择所有单选框 */
}
input[type="radio"]:checked {
/* 选择被勾选的单选框 */
}
input[type="radio"]:not(:checked) {
/* 选择未被勾选的单选框 */
}
:lang 选择器
:lang(language)，用于选择所有带有以指定值开头的 lang 属性的元素，例如 p:lang(en)。
<p lang="en">匹配</p>
<p lang="en-US">匹配</p>
p:lang(en) {
color: red;
}
/* 等同于 */
p[lang|="en"] {}
该选择器等同于 [lang|="language"]，是 [attribute|="value"] 属性选择器的一种特例。
结构伪类选择器
:nth-child(n)，选择同级元素中的第 n 个元素：
<ul>
<li></li>
<li>匹配</li>
<li></li>
</ul>
:nth-child(2) {
color: red;
}
需要注意的是子元素的下标是从 1 开始的。除了可以指定特定的数字，也可以使用 even（偶数）, odd（奇数） 关键字，例如 ul > li:nth-child(odd)，或者使用公式，例如 ul > li:nth-child(2n+1)（n 是计数器，从 0 开始的自然数）：
<ul>
<li>匹配</li>
<li></li>
<li>匹配</li>
</ul>
ul > li:nth-child(odd) {
color: red;
}
/* 等同于 */
ul > li:nth-child(2n+1) {
color: red;
}
:nth-child(odd) {
/* 选择奇数 */
}
:nth-child(even) {
/* 选择偶数 */
}
:nth-child(-n + 5) {
/* 选择前 5 个子元素 */
}
:nth-child(2n + 1) {
/* 选择奇数 */
}
:nth-child(2n) {
/* 选择偶数 */
}
:nth-child(n + 5) {
/* 选择第 5 个子元素及其后面的子元素 */
}
:nth-last-child(n)，同上，不过是从最后一个子元素开始反向计数。
使用该结构伪类选择器可以根据奇偶实现隔行变色的效果。
:first-child，选择同级元素中的第一个元素：
<ul>
<li>匹配</li>
<li></li>
<li></li>
</ul>
:first-child {
color: red;
}
/* 等同于 */
:nth-child(1) {
color: red;
}
:first-child 作用等同于 :nth-child(1)
:last-child，选择同级元素中的最后一个元素：
<ul>
<li></li>
<li></li>
<li>匹配</li>
</ul>
:last-child {
color: red;
}
/* 等同于 */
:nth-last-child(1) {
color: red;
}
:last-child 作用等同于 :nth-last-child(1)。
:only-child，用于选择父元素下唯一的子元素：
<ul>
<li>匹配</li>
</ul>
<ul>
<li>不匹配</li>
<li>不匹配</li>
</ul>
<div>
<p>不匹配</p>
<span>不匹配</span>
</div>
:only-child {
color: red;
}
匹配的子元素必须没有任何兄弟元素，<html> 元素也属于唯一子元素
:nth-of-type(n)，选择同级元素中的第 n 个相同元素，这里的相同是指元素名相同(如 <div> 和 <div> 相同)，例如 .box > :nth-of-type(2)：
<div class="box">
<p></p>
<span></span>
<p>匹配</p>
<span>匹配</span>
</div>
.box > :nth-of-type(2) {
color: red;
}
也可以添加额外的限制
<div class="box">
<p></p>
<span></span>
<p></p>
<span>匹配</span>
</div>
.box > span:nth-of-type(2) {
color: red;
}
:nth-last-of-type，同上，从同类元素中最后一个倒着数。
:first-of-type，选择同级元素中的第一个同类元素，等同于 :nth-of-type(1)。
:last-of-type，选择同级元素中的最后一个同类元素，等同于 :nth-last-of-type(1)。
:only-of-type，用于选择父元素下特定类型的唯一子元素，例如 .box > :only-of-type：
<div class="box">
<p></p>
<em>匹配</em>
<p></p>
<span>匹配</span>
</div>
.box > :only-of-type {
color: #333;
}
这类选择器是在同类元素中计数，非同类元素互相不参与彼此的计数
:root 选择器
:root，选择文档的根元素，对于 HTML 文档就是 html 元素。
:empty 伪类选择器
:empty，选择没有子元素的元素（包括文本节点），例如，隐藏没有内容的 p 元素，
<p>非空不会匹配</p>
<p>
</p> <!-- 非空有空白符不会匹配 -->
<p></p> <!-- 为空会匹配 -->
p:empty {
display: none;
}
使用的时候需要小心，空白也会被当作内容来处理，不过绝大多数优化工具都会删除无用的空白
伪元素
伪元素选择器用于选择那些若有实无的元素。在 CSS3 中，伪元素的写法为两个冒号，为了兼容旧浏览器，也可以使用一个冒号。
首字母伪元素选择器
::first-letter，选择元素的第一个字母，例如：
p::first-letter {
font-size: 300%;
}
段落元素的首字母放大。
首行伪元素选择器
::first-line，选择元素的第一行，例如：
p::first-line {
text-decoration: underline;
}
段落元素的首行添加下划线。
::before/::after 生成内容伪元素选择器
::before，选择在元素之前插入的生成内容。
::after，选择在元素之后插入的生成内容，例如：
<blockquote>Lorem ipsum dolor sit amet.</blockquote>
该伪元素必须和 content 属性搭配使用：
blockquote::before {
content: "\0022";
}
blockquote::after {
content: "\0022";
}
::selection 伪元素选择器
::selection，选择用户选取的内容，例如：
::selection {
background: #b3d4fc;
text-shadow: none;
}
在本页面随意选取内容就能看到效果
参考资料
本文来自博客园，作者：by.Genesis，转载请注明原文链接：https://www.cnblogs.com/xyzhanjiang/p/5447406.html
