1.标签选择器
> 结构：
标签名｛css属性名：属性值；｝
＞作用：借助标签名，找到页面中所有这类标签，设置样式
> 注意点：
1． 标签选择器选择的是一类标签单独某一个就是，而不
2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: red;
/* 选择所有的标签 */
}
</style>
</head>
<body>
<p>pp</p>
<p>mmmm</p>
</body>
</html>
2.类选择器
＞ 结构：.类名｛css属性名：属性值；｝
＞作用：依据类名，找到页面中所有带有该类名的标签，设置样式
> 注意点：
1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3. 一个标签行同时有多个类名，类名之间以空格隔开
通过4. 类名可以重复，一个类选择器能够同时选中多个标签
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{color: red; }
.size{font-size: 30px; }
</style>
</head>
<body>
<divclass="one">pppp</div>
<p class="onesize">mmm</p>
</body>
</html>
3.id选择器
结构：#id属性值｛css属性名：属性值；｝
>作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
注意点：
1. 所有标签上都有id属性
2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3. 一个标签上只能有一个id属性值
4. 一个id选择器只能选中一个标签
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#n{ color: blue }
</style>
</head>
<body>
<p id="n">mmm</p>
<p id="n">kkk</p> <!-- id选择器一个页面只能用一次，用多次js会出问题 -->
</body>
</html>
4.通配选择器
＞结构：*｛cSS属性名：属性值：｝
＞ 作用：找到页面中所有的标签，设置样式
> 注意点：
1. 开发中使用极少，只会在极特殊情况下才会用到
2. 在小页面中可能会用于去除标签默认的margin和padding
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ color: red; }
</style>
</head>
<body>
<p>mmm</p>
<div>llll</div>
<h1>ooo</h1>
<span>ppp</span>
</body>
</html>
高阶
5.集合选择器
（1）后代选择器
>作用：根据 HTML 标签的嵌套关系，选择父元素 后代中满足条件的元素
> 选择器语法：选择器1选择器2｛css｝
> 注意点：
1. 后代包括：儿子、孙子、重孙子⋯
2．后代选择器中，选择器与选择器之前通过 空格隔开
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
/*div中的所有后代变红*/
</html>
（2）子集选择器
>作用：根据 HTML 标签的嵌套关系，选择父元素 子代中满足条件的元素
> 选择器语法：选择器1>选择器2｛css｝
> 注意点：
1． 子代只包括：儿子
2. 子代选择器中，选择器与选择器之前凭借＞隔开
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div a { color: red; } */(如果运行此句，则div中的所有后代均会变红)
div>a {color: red;}（如果运行此句，则只有div中a标签会变红）
</style>
</head>
<body>
<div>父级
<a href="">这是div里面的a</a>
<p>
<a href="">这是div里面的a</a>
</p>
</div>
</body>
</html>
6.并集选择器
＞ 作用：同时选择多组标签，设置相同的样式
> 选择器语法：选择器1，选择器2｛css｝
> 注意点：
1. 并集选择器中的每组选择器之间利用，分隔
2． 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3． 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppppp</p>
<div>div</div>
<h1>h1</h1>
<span>span</span>
</body>
</html>
7.交集选择器：紧挨着
> 作用：选中页面中 同时满足 多个选择器的标签
> 选择器语法：选择器1选择器2｛css｝=
> 注意点：
1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.box{ color: red; }（注意".box"是类选择器）
</style>
</head>
<body>
<pclass="box">这是p标签：box</p>
<p>ppp</p>
<divclass="box">这是一个p标签</div>
</body>
</html>
8.hover伪类选择器
4.1 hover伪类选择器
＞ 作用：选中鼠你悬停住元素上的状态，设置样式
> 选择器语法：选择器：hover｛css｝
> 注意点：
1． 伪类选择器选中的元素的某种状态
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:hover {
color: red;
background-color: blue;
}
div:hover {
color: red;
}
</style>
</head>
<body>
超链接</a>就是<a href="#">这
<div>ppp</div>
</body>
</html>
浙公网安备 33010602011771号