CSS 选择器

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

1. 简单选择器（根据名称、id、类来选取元素）：

1.1 元素选择器（类型选择器）

将 h1 的颜色改为灰色：

h1 {color:gray;}

将 h1 和 h4 的颜色改为灰色：

h2 , h4 {clor:gray}

1.2通配符选择器

将文档中每个元素的颜色都改为红色：

* {color:red;}

1.3类选择器

将文档中类名为 important 的元素改为红色：

.important {color:red;}

<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>

类选择器可以结合元素选择器来使用。
例如，您可能希望只有段落（p）显示为红色文本：

p.important {color:red;}

当class属性中有多个值时
这个选择器将只匹配class属性中包含词 important 和 warning 的元素

.important.warninng{
	color:red
}
<p class="important warning">
This paragraph is a very important warning.
</p>

1.4 id选择器

将 id 的值为 intro 的元素字体加粗

#intro {font-weight:bold;}

<p id="intro">This is a paragraph of introduction.</p>

2. 组合器选择器

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：后代选择器 (空格)、子选择器 (>)、相邻兄弟选择器 (+)、通用兄弟选择器 (~)

2.1后代选择器(空格)

后代选择器匹配属于指定元素后代的所有元素。
下面的例子选择 div 元素内的所有 p 元素：

div p {
  background-color: yellow;
}

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>

2.2子选择器(>)

子选择器匹配属于指定元素子元素的所有元素
下面的例子选择属于 div 元素子元素的所有 p 元素：

div > p {
  background-color: yellow;
}

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代，所以它不会改变颜色 -->
  <p>div 中的段落 4。</p>
</div>

2.3相邻兄弟选择器(+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 div 元素之后的所有 p 元素：

div + p {
  background-color: yellow;
}

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>	<!-- 只有它会改变颜色 -->
<p>段落 4。不在 div 中。</p>

2.4通用兄弟选择器 (~)

通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
下面的例子选择属于 div 元素的同级元素的所有 p 元素：

div ~ p {
  background-color: yellow;
}

<p>段落 1。</p>

<div>
  <p>段落 2。</p>
</div>

<p>段落 3。</p>	<!-- 改变颜色 -->
<code>一些代码。</code>
<p>段落 4。</p>	<!-- 改变颜色 -->

3. 伪类选择器

CSS伪类选择器

4. 伪元素选择器

CSS伪元素选择器

二者区别：
伪类选择器和伪元素选择器的区别

5. 属性选择武器

为带有特定属性的 HTML 元素设置样式

选择器				例子				 	 例子描述
[attribute]			[target]			 选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]		 选择带有 target="_blank" 属性的所有元素。
[attribute~=value]	[title~=flower]		 选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value]	[lang|=en]			 选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^="https"]	 选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]	a[href$=".pdf"]		 选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]	a[href*="w3school"]	 选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

实例：

所有带有 target 属性的 <a> 元素：
a[target] {
  background-color: yellow;
}