1.基础选择器
（1）类选择器：用点（.）来查找，可以有多个属性值，用空格分开即可
注意：多个属性值是指定义class名字的时候可以定义多个属性值
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
.zs{
color: brown;
font-size: 25px;
}
.zs1{
color: aqua;
font-size: 25px;
}
</style>
</head>
<body>
<p class="zs">周深的歌</p>
<ol>
<li class="zs zs1">《大鱼》</li>
<li>《我的答案》</li>
<li>《好风起》</li>
</ol>
</body>
</html>
（2）唯一选择器（id选择器）：用#来查找
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
.zs{
background-color: brown;
font-size: 25px;
}
.zs1{
color: aqua;
font-size: 25px;
}
#answer{
color: red;
font-size: 25px;
}
</style>
</head>
<body>
<p class="zs">周深的歌</p>
<ol>
<li class="zs zs1">《大鱼》</li>
<li id="answer">《我的答案》</li>
<li>《好风起》</li>
</ol>
</body>
</html>在这里插入代码片
（3）通配符选择器（*）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
*{
background-color: pink;
color: blue;
font-size: 45px;
}
</style>
</head>
<body>
<p class="zs">周深的歌</p>
<ol>
<li class="zs zs1">《大鱼》</li>
<li id="answer">《我的答案》</li>
<li>《好风起》</li>
</ol>
</body>
</html>
（4）tagName标签选择器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p{
color: red;
font-size: 40px;
}
li{
color: aqua;
font-size: 40px;
}
</style>
</head>
<body>
<p class="zs">周深的歌</p>
<ol>
<li class="zs zs1">《大鱼》</li>
<li id="answer">《我的答案》</li>
<li>《好风起》</li>
</ol>
</body>
</html>
2.层级选择器
（1）组合选择器：多个选择器之间用逗号相隔，例如：选择器1，选择器2（如：ol,p）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p,li{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<p>周深的歌</p>
<ol>
<li>《大鱼》</li>
<li>《我的答案》</li>
<li>《好风起》</li>
</ol>
</body>
</html>
（2）包含选择器：选择器1 选择器2（选择器2被选择器1包含）用空格相隔
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
div p{
color: red;
font-size: 40px;
}
ol li{
color:aquamarine;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<p class="zs">周深的歌</p>
</div>
<ol>
<li>《大鱼》</li>
<li>《我的答案》</li>
<li>《好风起》</li>
</ol>
</body>
</html>
（3）子选择器：子选择器1>子选择器2（1是2的父亲），只有父子关系才可以
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
div>p{
color: red;
font-size: 40px;
}
/* li相当于div孙子，所以不起作用；把div改为ol即可 */
div>li{
color:aquamarine;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<p class="zs">周深的歌</p>
</div>
<p>周深参加的综艺</p>
<div>
<ol>
<li>《大鱼》</li>
<li>《我的答案》</li>
<li>《好风起》</li>
</ol>
</div>
</body>
</html>
（4）相邻选择器：选择器1+选择器2（两选择器要紧挨着）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
div+p{
color: red;
font-size: 40px;
}
div+li{
color:aquamarine;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<span>周深的歌</span>
</div>
<p>周深参加的综艺</p>
<div>
<ol>
<li>《大鱼》</li>
<li>《我的答案》</li>
<li>《好风起》</li>
</ol>
</div>
</body>
</html>
（5）兄弟选择器：选择器1~选择器2（选择器1后面所有的兄弟选择器2，选择器之间是并列关系）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
div~p{
color: red;
font-size: 40px;
}
ol~li{
color:aquamarine;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<p>周深的歌</p>
<!-- <span>周深</span> -->
</div>
<p>周深巡回演唱会</p>
<div>---------------</div>
<p>周深参加的综艺</p>
<div>
<ol>
<li class="zs zs1">《大鱼》</li>
<li id="answer">《我的答案》</li>
<li>《好风起》</li>
</ol>
</div>
</body>
</html>
3.属性选择器
- 根据属性名或者属性值来查找某个元素
- E（element 元素标签） ATT（attribute 属性） VAL（value值）
（1）标签属性
① EATT匹配所有具有ATT属性的元素，不考虑属性值
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
[title]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
</body>
</html>
（2）EATT = VAL匹配所有ATT属性等于VAL的元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p[title = "Floating light"]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
</body>
</html>
（3）EATT \~= VAL 匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p[title ~= "This"]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
</body>
</html>
（4）EATT \|= VAL匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p[title |= "great"]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
<p title="great-life-mod">《好好生活就是美好生活》</p>
<p title="great">《化身孤岛的鲸》</p>
</body>
</html>
（5）EATT \^= VAL属性ATT的值以VAL开头的元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p[title ^= "This"]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
<p title="great-life-mod">《好好生活就是美好生活》</p>
<p title="great">《化身孤岛的鲸》</p>
</body>
</html>
（6）EATT $= VAL属性ATT的值以val结尾的元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p[title $= "t"]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
<p title="great-life-mod">《好好生活就是美好生活》</p>
<p title="great">《化身孤岛的鲸》</p>
</body>
</html>
（7）EATT \*= VAL属性ATT的值中有val存在的元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p[title *= "i"]{
color:aqua;
font-size: 55px;
}
</style>
</head>
<body>
<span>周深好歌分享：</span>
<p title="This is me">《小美满》</p>
<p title="This is sunshine">《光亮》</p>
<p title="Floating light">《浮光》</p>
<p title="great-life-mod">《好好生活就是美好生活》</p>
<p title="great">《化身孤岛的鲸》</p>
</body>
</html>
4.结构性伪类选择器
（1）伪元素选择器（不是对真正的元素选择）
① E：first-line（作用于元素的第一行）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 作用于p标签的第一行，尽管有多行 */
p:first-line{
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<div>
<p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p>
<span>《白月梵星》主演：</span>
<span>白鹿</span>
<span>敖瑞鹏</span>
</div>
</body>
</html>
② E:first-letter(E的第一个字母)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 作用于p标签的第一个字 */
p:first-letter{
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<div>
<p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p>
<span>《白月梵星》主演：</span>
<span>白鹿</span>
<span>敖瑞鹏</span>
</div>
</body>
</html>
③ E:before(该标签之前内容，需要配合content使用)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 作用于p标签之前定义的内容 */
p:before{
content: "好看的电视剧：";
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p>
</div>
</body>
</html>
④ E:after(与上面before用法类似)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
/* 作用于p标签之后定义的内容 */
p:before{
content: "这是一部好看的电视剧！";
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏<br></p>
</div>
</body>
</html>
（2）4个基本的伪类选择器
① :root（将样式绑定到页面的根元素）针对一些变量去使用，可以直接在定义的地方进行修改
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
:root{
//定义变量
--fontColor:red;
}
p{
color:var(--fontColor) //使用变量
}
</style>
</head>
<body>
<p>选择器</p>
</body>
</html>
② E:not() (除去这个元素之外的)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:not(.three){
color:aqua;
font-size:35px;
}
</style>
</head>
<body>
<ol>
<li class="one">床前明月光</li>
<li class="two">疑是地上霜</li>
<li class="three">举头望明月</li>
<li class="four">低头思故乡</li>
</ol>
</body>
</html>
③ E:empty（匹配所有为空的元素）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:empty{
background-color: pink;
}
</style>
</head>
<body>
<ol>
<li class="one">床前明月光</li>
<li></li>
<li class="two">疑是地上霜</li>
<li></li>
<li class="three">举头望明月</li>
<li></li>
<li class="four">低头思故乡</li>
</ol>
</body>
</html>
④ :target （代表链接到目标）针对a标签
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
a:target{
font-weight: bold;
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<a href="#fish">周深的歌</a>
<a href="#play">周深的综艺</a>
<a id="fish">《大鱼》</a>
<a id="play">《奔跑吧》</a>
</body>
</html>
5.其他结构伪类选择器
（1）E:first/last child（对一个父元素中的第一个/最后一个子元素E设置样式）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:first-child{
color:red;
font-size:40px;
}
li:last-child{
color:pink;
font-size: 40px;
}
</style>
</head>
<body>
<ol>
<li class="one">床前明月光</li>
<li class="two">疑是地上霜</li>
<li class="three">举头望明月</li>
<li class="four">低头思故乡</li>
</ol>
</body>
</html>
（2）E:nth-child()/E:nth-last-child() 对指定元素进行设置样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:nth-child(1){
color:red;
font-size:40px;
}
li:nth-last-child(2){
color:pink;
font-size: 50px;
}
</style>
</head>
<body>
<ol>
<li class="one">床前明月光</li>
<li class="two">疑是地上霜</li>
<li class="three">举头望明月</li>
<li class="four">低头思故乡</li>
</ol>
</body>
</html>
（3）E:nth-of-child()与E:nth-child()作用类似，但仅匹配使用的同种标签
E:nth-last-of-type()与E:nth-last-child()作用类似，但仅匹配使用的同种标签
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:nth-child(1){
color:red;
font-size:40px;
}
/*匹配同标签，则第二行的p标签样式不会改变*/
li:nth-of-type(2){
color:blue;
font-size:40px;
}
li:nth-last-child(2){
color:pink;
font-size: 40px;
}
li:nth-last-of-type(1){
color:purple;
font-size: 40px;
}
</style>
</head>
<body>
<li class="one">床前明月光</li>
<p>《静夜思》</p>
<li class="two">疑是地上霜</li>
<span>李白</span>
<li class="three">举头望明月</li>
<li class="four">低头思故乡</li>
</ol>
</body>
</html>
（4）E:nth-child(an+b)
a:表示每次循环中间隔几个改变样式
b:表示指定循环中开始的位置
E:nth-of-type(an+b)类似
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
li:nth-child(2n+1){
color:red;
font-size:40px;
}
li:nth-of-type(2n+2)
{
color:purple;
font-size: 45px;
}
</style>
</head>
<body>
<ol>
<li class="one">床前明月光</li>
<li class="two">疑是地上霜</li>
<li class="three">举头望明月</li>
<li class="four">低头思故乡</li>
</ol>
</body>
</html>
(5)E:only-child 父亲只有一个孩子的，并且该孩子是E元素
E:only-of-type类似
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器</title>
<style>
p:only-child{
color:red;
}
</style>
</head>
<body>
<div>
<p>床前明月光</p>
</div>
<div>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
</body>
</html>