CSS 选择器就是指定 CSS 要作用的标签的名称。即选择哪个容器来应用这种 CSS 样式。CSS 选择器可以分为基本选择器与扩展选择器
# 基本选择器
# 标签选择器
指定一种标签，将 CSS 应用于页面上所有的选定标签
p {
/* 此处 CSS 样式将作用于所有的 <p> 标签 */
}
2
3
# ID 选择器
将 CSS 应用于指定 ID 的标签，通过 # + id 的方式指定
#title {
/* 此处 CSS 样式将作用于 ID 为 title 的标签 */
}
2
3
# 类选择器
将 CSS 应用于所有指定 class 的标签，通过 . + class 的方式指定
.title {
/* 此处 CSS 样式将作用于所有 class 为 title 的标签 */
}
2
3
ID 选择器与类选择器
每个标签都可以带有 id 属性与 class 属性，不同的标签 id 不能相同但可以有相同的 class，同一个标签可以带有多个 class 属性，这些属性通过空格分隔，因此类选择器使用比较灵活，也是指定 CSS 最常使用的方式
<!-- 对 p 标签使用多个 class -->
<p class="class1 class2 class3"></p>
2
# 通配符
通配符 * 可以匹配所有的标签，一般情况下尽量不要使用
* {
/* 此处 CSS 样式将作用于所有标签 */
}
2
3
# 扩展选择器
# 后代选择器
当我们需要选中指定标签下的所有指定子标签就可以使用后代选择器。后代选择器通过将两个或多个基本选择器用空格分隔来定义。
div p {
/* 此处 CSS 样式将作用于所有 <div> 标签下的所有 <p> 标签 */
}
p .title {
/* 此处 CSS 样式将作用于所有 <p> 标签下的所有 class 为 title 的标签 */
}
div p .title {
/* 此处 CSS 样式将作用于 <div> 标签下的所有 <p> 标签下的所有 class 为 title 的标签 */
}
2
3
4
5
6
7
8
9
# 子代选择器
当我们需要选中指定标签下的子代标签时可以使用子代选择器。与后代选择器不同，子代指的是直接后代。子代选择器通过 > 来定义
div>p {
/* 此处 CSS 样式将作用于所有 <div> 标签下的子代 <p> 标签 */
}
2
3
# 交集选择器
当我们需要通过多个条件选中指定标签的时候可以使用交集选择器。定义交集选择器需要将基本选择器紧密相连通常标签选择器在前
p.title {
/* 此处 CSS 样式将作用于所有 class 为 title 的 <p> 标签 */
}
div#title {
/* 此处 CSS 样式将作用于 id 为 title 的 <div> 标签 */
}
div.title.red {
/* 此处 CSS 样式将作用于同时包含 title 与 red 两个 class 的 <div> 标签 */
}
2
3
4
5
6
7
8
9
# 并集选择器
当我们需要对多种标签使用相同样式时可以使用并集选择器。并集选择器将要选择的基本选择器用 , 分隔
div,p {
/* 此处 CSS 样式将作用于所有 <div> 标签和 <p> 标签 */
}
p,.title {
/* 此处 CSS 样式将作用于所有 <p> 标签和所有 class 为 title 的标签 */
}
div,p,#title {
/* 此处 CSS 样式将作用于所有 <div> 标签和所有 <p> 标签以及所有 id 为 title 的标签 */
}
2
3
4
5
6
7
8
9
# 兄弟选择器
当我们需要选择某个标签后面的兄弟标签时可以使用兄弟选择器。
# 当我们需要选中下一个相邻的兄弟标签时通过 + 来定义
div+p {
/* 此处 CSS 样式将作用于所有与 <div> 标签相邻的下一个 <p> 标签 */
}
2
3
# 当我们需要选中后面所有的兄弟标签时通过 ~ 来定义
div~p {
/* 此处 CSS 样式将作用于所有 <div> 标签后的兄弟 <p> 标签 */
}
2
3
# 属性选择器
当需要通过元素的属性以及属性的值来选择元素时就可以使用属性选择器，属性选择器通过 [] 来表示
# 简单属性选择器
要选择包含指定属性的元素只需要将属性用 [] 包裹并放在元素后面
*[class] {/* 此处 CSS 样式将作用于所有包含 class 属性的标签 */}
a[href] {/* 此处 CSS 样式将作用于所有包含 href 属性的 <a> 标签 */}
2
如果要选中多个属性则只需要将属性选择器排列在一起
a[class][href] {/* 此处 CSS 样式将作用于所有同时包含 href 与 class 属性的 <a> 标签 */}
# 根据具体属性值选择
我们可以通过 = 来为指定的属性配置指定的值
a[href = "https://www.baidu.com"] {
/* 此处 CSS 样式将作用于所有包含 href 属性且 href 值为 https://www.baidu.com 的 <a> 标签 */
}
2
3
# 根据部分属性值选择
有些属性包含用空格分隔的多个值，要选择其中的某个值可以使用 ~=
p[class ~= "class1"] {
/* 此处 CSS 样式将作用于所有包含 class 属性且 class 值包含 class1 的 <p> 标签 */
}
2
3
上面例子中的写法等价于 p.class1 {} 。不同的是这种写法只能用于 class 而上面的方法可以用于所有属性
# 根据属性字符串匹配选择CSS3
我们可以通过 ^= 来指定属性的值必须以指定字符串开头
a[href ^= "https"] {
/* 此处 CSS 样式将作用于所有包含 href 属性且 href 的值以 https 开头的 <a> 标签 */
}
2
3
我们可以通过 $= 来指定属性的值必须以指定字符串结尾
a[href $= ".com"] {
/* 此处 CSS 样式将作用于所有包含 href 属性且 href 的值以 .com 结尾的 <a> 标签 */
}
2
3
我们可以通过 *= 来指定属性的值必须包含指定的字符串
a[href *= "baidu"] {
/* 此处 CSS 样式将作用于所有包含 href 属性且 href 的值包含 baidu 的 <a> 标签 */
}
2
3
# 特定属性选择
通过 |= 来定义，多用于匹配语言
p[lang |= "en"] {
/* 此处 CSS 样式将作用于所有包含 lang 属性且 lang 的值等于 en 或以 en- 开头的 <p> 标签 */
}
2
3
<html>
<head>
<style>
p[lang |= "en"] {
color: red;
}
</style>
</head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 伪类 (伪类选择器)
如果一个标签需要在不同的状态下使用不同的样式，这时就需要伪类。伪类用 : 表示
下面是一些常用的伪类:
:link设置超链接点击之前的样式:visited设置超链接被访问之后的样式:hover设置鼠标放到标签上时的样式:active设置鼠标点击标签但不松手时的样式。:focus设置某个标签获得焦点时的样式（比如某个输入框获得焦点）
# 超链接的四种状态
<a> 标签有下面 4 种伪类
a:link {/* 超链接点击之前的样式 */}
a:visited {/* 超链接被访问之后的样式 */}
a:hover {/* 鼠标放到标签上(悬停)的样式 */}
a:active {/* 鼠标点击标签但不松手(长按)的样式 */}
2
3
4
书写顺序
a:link 、 a:visited 、 a:hover 、 a:active 四种伪类必须按固定顺序来写，否则会失效
超链接美化
a{} 与 a:link{} 都可以定义超链接的样式，他们的区别是:
a{}定义的样式针对所有的超链接 (包含了锚点)a:link{}定义的样式针对所有写了href属性的超链接 (不包含锚点)
如果不同伪类的样式相同可以写在一起用逗号隔开 (使用并集选择器)
a:link, a:visited {}
# 结构伪类选择器CSS3
结构伪类选择器可以根据目标元素在其兄弟元素中的位置来选择。
# 匹配首尾元素
:first-child 与 :last-child 可以分别匹配一组兄弟元素中的第一个与最后一个目标元素。
位置选择
这里的位置是相对于一组兄弟元素的父元素而言，第一个元素也就是父元素的子代元素。选择器会找到所有位置符合的元素，然后查看该元素是否为指定的元素，如果类型不匹配则该位置失效
<html>
<style>
/* 设置基础样式后面的例子中通用 */
.test li {
list-style: none;
}
.test li, .test a {
display: inline-block;
}
.test li, .test a, .test div {
min-width: 40px;
height: 25px;
border-color: black;
border-width: 1px;
border-style: solid;
text-align: center;
}
/* 结构伪类选择器示例 */
.test1 li:first-child {
background-color: red;
}
.test1 li:last-child {
background-color: green;
}
</style>
<h5>通过结构伪类选择器变更首尾 li 元素的背景色</h5>
<ul class="test test1">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
<h5>第一个元素是 a 元素不是目标 li 元素位置无效</h5>
<ul class="test test1">
<a>1</a><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
# 匹配指定位置元素
通过下面的选择器可以匹配指定位置的元素
:nth-child(n): 匹配一组兄弟元素中的第 n 个元素，编号从 1 开始:nth-last-child(n): 匹配一组兄弟元素中倒数第 n 个元素:nth-child(odd): 匹配奇数元素:nth-child(even): 匹配偶数元素
<html>
<style>
.test2 li:nth-child(3) {
background-color: red;
}
</style>
<h5>将第3个 li 元素背景色变为红色</h5>
<ul class="test test2">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
<h5>如果目标位置不是指定元素则该位置无效</h5>
<ul class="test test2">
<li>1</li><li>2</li><a>3</a><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
:nth-child(n) 除了可以填入具体的数字表示选定具体位置的元素外，还可以填入包含 n 的表达式。此时其中的 n 表示 0, 1, 2, 3 ... 等数字，通过将这些数字带入表达式计算，计算结果中大于 0 的数就是需要选中的元素的位置。
:nth-child(n): 直接填入 n 表示选中所有位置的元素:nth-child(2n): 表示所有偶数位的元素，等同于:nth-child(even):nth-child(2n+1): 表示所有奇数位的元素，等同于:nth-child(odd):nth-child(-n+5): 表示前 5 个元素 (将 0, 1, 2 ... 带入 n 计算得 5, 4, 3 ...，排除小于 0 的数可以看出是前 5 个位置):nth-child(7n): 表示选中 7 的倍数的位置
通过上面的规律可以根据具体的需求得出位置序列的表达式， :nth-last-child(n) 用法相同，不同的是得出的位置是反向的。如 :nth-last-child(-n+5) 表示倒数后 5 个元素
# 在指定类型中匹配指定位置的元素
上面的匹配指定位置元素的选择器是先找到指定位置在查看是否是指定类型，如果目标位置不是指定的类型则该位置不会被选中，也就是如果指定类型前后插入了其他类型的元素则这些其他类型的元素也会占用选择器的位置。如果我们想排除这些其他类型元素只在指定元素中按位置选择可以使用下面的方法。
:first-of-type: 匹配指定类型中第一个元素:last-of-type: 匹配指定类型中的最后一个元素:nth-of-type(n): 匹配指定类型中的第 n 个元素:nth-last-of-type(n): 匹配指定类型中的倒数第 n 个元素
这些选择器会先将非指定类型元素排除后再按位置选择
<html>
<style>
.test3 li:nth-of-type(3) {
background-color: red;
}
</style>
<h5>将第3个 li 元素背景色变为红色</h5>
<ul class="test test3">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
<h5>插入 a 元素不影响 li 元素的位置选择</h5>
<ul class="test test3">
<li>1</li><li>2</li><a>3</a><li>4</li><li>5</li><li>6</li><li>7</li>
</ul>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 匹配指定格式的元素
:empty: 匹配没有任何内容的元素，空格也不能有
<html>
<style>
.test4 div {
float: left;
}
.test4 div:empty {
background-color: red;
}
</style>
<h5>将没有内容的 div 元素背景设置为红色</h5>
<div class="test test4">
<div>2</div> <div></div> <div> </div> <div><span></span></div>
</div>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
:target: 匹配相关 URL 指向的元素，要配合锚点使用。
<html>
<style>
.test5 div, .test5 a {
display: inline-block;
}
.test5 a {
min-width: 50px;
}
.test5 #first:target, .test5 #second:target, .test5 #third:target {
background-color: red;
}
</style>
<h5>将 URL 指向的元素背景设置为红色</h5>
<div class="test test5">
<div id="first">1</div><div id="second">2</div><div id="third">3</div>
</div>
<div class="test5">
<a href="#first">指向 1</a><a href="#second">指向 2</a><a href="#third">指向 3</a>
</div>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 伪元素选择器
伪元素通过 :: 来设置
# 在元素前后添加内容
::before 与 ::after 配合 content 属性使用，可以在指定元素内部前后添加指定的内容同时设置内容的样式。
<html>
<style>
.test6 div::before{
content: "添加前缀内容";
color: red;
}
.test6 div::after{
content: "添加后缀内容";
color: green;
}
</style>
<div class="test6">
<div> 初始内容 </div>
</div>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 设置元素内文本样式
::first-letter: 设置元素内第一个字符的样式::first-line: 设置元素内第一行的样式::selection: 设置元素内被鼠标选中的区域样式
<html>
<style>
.test7 p::first-letter{
font-size: 20px;
}
.test7 p::first-line{
color: red;
}
.test7 p::selection{
background-color: yellow;
}
</style>
<div class="test7">
<p>渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同</p>
<p>渐进增强一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。</p>
<p>优雅降级一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览</p>
</div>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22