CSS 选择器
CSS 选择器类别
①基本选择器
②关系选择器
③伪类选择器
1. 基本选择器 1.1 标签选择器
HTML 标签是最典型的选择器类型，任何 HTML 元素都可以用作选择器。
例如：html、body、h1-h6、p、pre、、em、a...
标签选择器的有效范围是页面中所有同名的HTML元素。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器title>
<style>
p {
color: blue;
font-size: 18px;
background-color: yellow;
}
style>
head>
<body>
<p>我是第一个p标签p>
<p>我是第二个p标签p>
<p>我是第三个p标签p>
body>
html>1.2 类选择器
为标签添加class属性，通过.class属性值选择文档中符合条件的标签。
关键点：
1. 一个标签中只能添加一个类属性，但一个类属性可以有多个类属性值。 多个类属性值之间用空格分隔！
2、一个标签中添加多个class属性值的原因是：方便CSS代码的复用！
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器title>
<style>
.tag {
color: blue;
}
style>
head>
<body>
<div class="tag">我是一个div标签div>
body>
html>1.3 id选择器
为标签添加id属性，并使用#id属性值来选择文档中满足条件的标签。
要点： 在一个HTML文档中（同一个网页中），不能有相同的id属性值。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器title>
<style>
#title {
color: blue;
}
style>
head>
<body>
<h1 id="title">我是标题h1>
body>1.4 通配符选择器
使用 * 选择文档中的所有标签。
例如： * { 颜色：红色； 这里所有元素的字体都设置为红色。
强调：class选择器和id选择器属性值，所有单词均小写，多个单词用“-”或“_”连接。
2. 关系选择器 2.1 交集选择器
交集选择器直接由两个选择器组成，其结果是两个选择器的元素范围的交集。 。
div.box {
background-color: yellow;
}2.2 联合选择器
联合选择器由多个通过逗号连接在一起的选择器组成。 这些选择器是：标签选择器、类选择器或id选择器等。
如果两个选择器之一满足条件，则选择交叉选择器。
.box, #block {
background-color: yellow;
}2.3 后代选择器
后代选择器也称为包含选择器，选择父元素包含的所有后代元素，并用空格分隔。
#box h1 {
background-color: yellow;
}2.4 父子选择器
选择父元素的所有直接子元素。 它对孙元素没有影响，由大于号表示。
#box > h1 {
background-color: yellow;
}
3. 伪类选择器
:link 选择之前没有访问过的超链接，仅适用于a标签
：选择已访问过的超链接，仅适用于标签
:hover [最常用] 鼠标悬停在标签上时选择，适用于所有标签
：鼠标按下时响应，鼠标抬起时取消响应，适用于所有标签
注意：如果同时使用以上四个伪类选择器，一定要注意排列顺序：LoVe HAte
4. 选择器之间的优先级 4.1 单个选择器的优先级
默认样式 < 继承样式 < 通配符选择器 < [标签选择器 < 类选择器 < id 选择器] < !
如果优先级相同，那么谁离正在操作的元素越近，谁的优先级就越高。
4.2 多个选择器的优先级
核心：比较id、class和标签选择器的数量。
首先看id选择器的数量。 id 选择器越多的优先级越高。 其次，看类选择器的数量，最后，看标签选择器的数量。
如果优先级相同，那么谁离正在操作的元素越近，谁的优先级就越高。
