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
}
"important warning">
This paragraph is a very important warning.
1.4 id选择器
将 id 的值为 intro 的元素字体加粗
#intro {font-weight:bold;}
"intro">This is a paragraph of introduction.
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[target] {
background-color: yellow;
}