一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第27天，点击查看活动详情。

CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

选择器大汇总：

选择器	例子	例子描述
.class	.intro	选择 class="intro" 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
#id	#firstname	选择 id="firstname" 的元素。
*	*	选择所有元素。
element（标签）	p	选择所有元素。
element.class	p.intro	选择 class="intro" 的所有元素。
element,element	div, p	选择所有元素和所有元素。
element element	div p	选择元素内的所有元素。
element>element	div > p	选择父元素是的所有元素。
element+element	div + p	选择紧跟元素的首个元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。
[attribute\|=value]	[lang\|=en]	选择 lang 属性值以 "en" 开头的所有元素。
[attribute^=value]	a[href^="https"]	选择其 src 属性值以 "https" 开头的每个元素。
[attribute$=value]	a[href$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有元素。
[attribute*=value]	a[href*="w3schools"]	选择其 href 属性值中包含 "abc" 子串的每个元素。
:active	a:active	选择活动链接。
::after	p::after	在每个的内容之后插入内容。
::before	p::before	在每个的内容之前插入内容。
:checked	input:checked	选择每个被选中的元素。
:default	input:default	选择默认的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 "it"（意大利）的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not(p)	选择非元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。
:optional	input:optional	选择不带 "required" 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 "placeholder" 属性的 input 元素。
:read-only	input:read-only	选择已规定 "readonly" 属性的 input 元素。
:read-write	input:read-write	选择未规定 "readonly" 属性的 input 元素。
:required	input:required	选择已规定 "required" 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例

p {
  color: red;
}

CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

实例

这条 CSS 规则将应用于 id="para1" 的 HTML 元素：

#para1 {
  color: red;
}

注意：id 名称不能以数字开头。

CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

**提示：**只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

实例

.center {
  color: red;
}

您还可以指定只有特定的 HTML 元素会受类的影响。

实例：类选择器结合元素选择器来使用

在这个例子中，只有具有 class="center" 的 p 标签元素会居中对齐：

p.center {
  text-align: center;
}

HTML 元素也可以引用多个类。

实例：多类选择器

在这个例子中，

元素将根据 class="important" 和 class="warning" 进行样式设置（对于这两个类名的位置顺序并没有要求）：

<p class="important warning">
This paragraph is a very important warning.
</p>
==============分割线==============
<style>
    .important {font-weight:bold;}
	.warning {font-style:italic;}
</style>

**注意：**类名不能以数字开头（这一点和我们命名id 的时候是类似的）！

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

.important.warning {background:silver;}

CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

实例

下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  text-align: center;
  color: blue;
}

CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。

请看下面的 CSS 代码（h1、h2 和 p 元素具有相同的样式定义）：

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组，以最大程度地缩减代码。如需对选择器进行分组，我们可以用逗号来分隔每个选择器。

实例

在这个例子中，我们对上述代码中的选择器进行分组：

h1, h2, p {
  text-align: center;
  color: red;
}

总结：所有简单的 CSS 选择器

选择器	例子	例子描述
.class	.intro	选取所有 class="intro" 的元素。
#id	#firstname	选取 id="firstname" 的那个元素。
*	*	选取所有元素。
element	p	选取所有元素。
element,element,..	div, p	选取所有元素和所有元素。

补充的选择器：

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例子 1

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

例子 2

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

例子 3

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

**提示：**上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

例子 4：为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片段中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

例子

例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.baidu.com"] {color: red;}

例子 2

与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。

a[href="http://www.baidu.com/"][title="BaiDu"] {color: red;}

这会把以下标记中的第一个超链接的文本变为红色，但是第二个或第三个链接不受影响：

<a href="http://www.baidu.com/" title="BaiDu">W3School</a>
<a href="http://www.baidu.com/css/" title="CSS">CSS</a>
<a href="http://www.baidu.com/html/" title="HTML">HTML</a>

例子 3

同样地，XML 语言也可以利用这种方法来设置样式。

下面我们再回到行星那个例子中。假设只希望选择 moons 属性值为 1 的那些 planet 元素：

planet[moons="1"] {color: red;}

上面的代码会把以下标记中的第二个元素变成红色，但第一个和第三个元素不受影响：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

属性与属性值必须完全匹配

请注意，这种格式要求必须与属性值完全匹配。

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

请考虑一下的标记片段：

<p class="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写（必须完全匹配！！！）：

p[class="important warning"] {color: red;}

根据部分属性值选择

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：

p[class~="important"] {color: red;}

注意：如果忽略了波浪号，则说明需要完成完全值匹配。

部分值属性选择器与点号类名记法的区别

该选择器等价于我们在类选择器中讨论过的点号类名记法。

也就是说，p.important 和 p[class="important"] 应用到 HTML 文档时是等价的。

那么，为什么还要有 "~=" 属性选择器呢？

因为它能用于任何属性，而不只是 class。

例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

子串匹配属性选择器

下表是对这些选择器的简单总结（这里面的匹配规则有一点点正则表达式的影子）：

类型	描述
[abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素

可以想到，这些选择有很多用途。

举例来说，如果希望对指向 BaiDu 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：

a[href*="baidu.com"] {color: red;}

（我们使用的 bootstrap 框架的那些栅格系统，我们就可以认为就是使用这种选个器来写的）

提示：****任何属性都可以使用这些选择器。

特定属性选择类型

最后为您介绍特定属性选择器。请看下面的例子：

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头 的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

当然，这种属性选择器最常见的用途还是匹配语言值。

CSS 属性选择器参考手册

选择器	描述
attribute	用于选取带有指定属性的元素。
attribute=value	用于选取带有指定属性和值的元素。
attribute~=value	用于选取属性值中包含指定词汇的元素。
attribute\|=value	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
attribute^=value	匹配属性值以指定值开头的每个元素。
attribute$=value	匹配属性值以指定值结尾的每个元素。
attribute=value	匹配属性值中包含指定值的每个元素。

CSS 后代选择器

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

根据上下文选择元素

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。具体写法就是在 “父” 与 “子” 选择器之间加上一个空格就阔以了

举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

当然，您也可以在 h1 中找到的每个 em 元素上放一个 class 属性，但是显然，后代选择器的效率更高。

语法解释

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

因此，h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

具体应用

后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。

假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。

解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式：

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

CSS 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响（因为第二个 h1 中的 strong 已经不是h1的子代了，而是其子代的子代了）：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

语法解释

您应该已经注意到了，子选择器使用了大于号（子结合符）。

子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：

h1 > strong
h1> strong
h1 >strong
h1>strong

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

结合后代选择器和子选择器

请看下面这个选择器：

table.company td > p

上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

CSS 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

语法解释

相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。

注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。

请看下面这个文档树片段：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：

li + li {font-weight:bold;}

上述代码中的两个 li 指向的内容：第一个 li 指向的是 ul 和 ol 列表中匹配到的的第一个 li ，第二个 li 是指前面匹配到的第一个 li 后面的第一个相邻的元素 li 。

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

结合其他选择器

相邻兄弟结合符还可以结合其他结合符：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

最最最最全的css选择器的详细解读！！！绝对值得一看！！

CSS 选择器

选择器大汇总：

CSS 元素选择器

CSS id 选择器

CSS 类选择器

CSS 通用选择器

CSS 分组选择器

总结：所有简单的 CSS 选择器

补充的选择器：

属性选择器

根据部分属性值选择

子串匹配属性选择器

特定属性选择类型

CSS 属性选择器参考手册

CSS 后代选择器

根据上下文选择元素

语法解释

具体应用

CSS 子元素选择器

选择子元素

语法解释

结合后代选择器和子选择器

CSS 相邻兄弟选择器

选择相邻兄弟

语法解释

结合其他选择器