标签选择器

<!-- 标签选择器 -->
p {
	color: red;
}

<p> Hello,World! </p>

类选择器

注意：

1. 类选择器使用 . （英文点号）进行标识，后面紧跟类名
2. 类名自定义，但不能使用纯数字或则中文来命名，尽量使用英文来命令
3. 长名称或则词组可以使用 _ 来隔开
4. 类名要有意义，要让人一眼就知道该类名是干什么的

<!-- 类选择器 -->
.color {
	color: pink;
}

<p class="color"> Hello,World! </p>

多类名

1. 标签 class 中可以输入多个类名，这样一个标签就可以实现多个类选择器的样式了
2. 多个类名之间要使用空格间隔开
3. 相同的样式可以放在一个类里面，这样就不需要创建多个类了，这样可以节省css代码，方便统一管理

<!-- 类选择器 -->
.color {
	color: pink;
}
.fonts {
    font-size: 100px;
}

<p class="color fonts"> Hello,World! </p>

id选择器

1. id选择器一般和JavaScript一起使用的
2. 一个id选择器，只能使用一次，也就是说不能多个标签是用同一个id选择器

<!-- id选择器 -->
#color {
	color: pink;
}

<p id="color"> Hello,World! </p>

id选择器和类选择器的区别：

1. 类选择器就相当于是人的名字，一个人可以有多个名字，可以重复使用
2. id选择器就相当于是一个人的省份证号码，是唯一的，不能重复使用
3. 修改样式一般使用类选择器

通配符选择器

通配符选择器就是用来修改页面中所有元素的样式的

<!-- 通配符选择器 -->
* {
	color: red;
}

通配符选择器不需要像别的选择器那样去设置属性，因为通配符选择器本身就是用来修改页面中所有元素的样式的

---

后代选择器

就是给父类标签中的子类标签设置样式的，如果li标签中有别的标签页可以使用这个方法修改样式（套娃）

/* 给无序列表中的li标签设置样式 */
ul li {
	color: pink;
}

父类标签和子类标签都可以用id选择器或者类选择器来表示

---

子类选择器

和后代选择器的区别就是子类选择器只会修改自己子类标签，但是孙类的标签不会被修改

ol>a {
	color: pink;
}

<ol id="b">
	<!-- 只修改该该标签 -->
	<a href="#">百度一下</a>
	<li>
	<!-- 该标签不会受到影响 -->
		<a href="#">hello</a>
	</li>
</ol>

---

并集选择器

div,
p,
ul li {
	color: pink;
}

<div>shijei</div>
<p>nihao</p>
<span>测试</span>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

---

常用的复合选择器：后代选择器，子选择器，并集选择器，伪类选择器

后代选择器

给所有ul（无序列表）下的所有li标签添加样式，非 li 标签则不会受到影响

ul li {
	color: pink;
}
.a1 li {
    color: orange;
}

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<ol class="a1">
    <!-- 该标签会受到影响 -->
	<li>1</li>
    <!-- 该标签不会受到影响 -->
    <a>
        a标签
        <!-- 该标签会受到影响 -->
    	<li>Hello,World!</li>
        <!-- 该标签不会受到影响 -->
        <p>你好世界</p>
    </a>
</ol>

---

伪类选择器

a:link   // 表示所有没有被访问过的链接
a:visited   // 表示所有已被访问过的链接
a:active   // 当鼠标按下去，但是没有松开时，添加样式
a:focus    // 当点击该链接之后，该链接的样式(当你鼠标点击别的地方时，该链接的样式消失)

input:hover   // 当鼠标悬停至元素上方时，向该元素添加样式

为了确保伪类选择器能够生效，请按照一下顺序声明：:link --> :visited --> :hover --> :active --> :focus

如果要给链接设置样式，则需要单独给链接单独设置样式，使用通配符选择器是不能修改链接的样式的

---

总结：

选择器	作用	特征	使用情况	隔开符及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	隔开符是空格 .nav a
子类选选择器	选择最近一级的元素	只能选择亲儿子	较少	隔开符是 > .nav>a
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	隔开符是 , .nav, .a
链接伪类选择器	选择不同状态的链接	根链接相关	较多	一般 a:hover 用的比较多
:focus 选择器	选择获得光标的表单	跟表单相关	较少	一般 input:focus 用的比较多

---