持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
选择器：
1.通用选择器
所有元素都会被选中
一般用来给所有元素作一些通用性的设置
比如内边距、外边距；
比如重置一些内容；
效率比较低，尽量不要使用；
\
2.简单选择器
简单选择器是开发中用得最多的选择器：
元素选择器(type selectors)，使用元素的名称 例：div{color: red;}；
类选择器(class selectors)，使用.类名例：.box{color: red;}；
id选择器(id selectors)，使用#id例：#main{color: red;}；
id注意事项
一个HTML文档里面的id是唯一的，不能重复
id值如果由多个单词组成，单词之间可以用中划线-、下划线_
链接，也可以使用驼峰标识
最好不要使用标签名作为id值
中划线又叫连字符(hyphen)
3.属性选择器
\
4.后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 后代选择器yi：所有的后代（直接/间接的后代） -->
<style>
.home span{
background-color: red;
}
/* 后代选择器二：直接子代选择器（必须是直接子代） */
.home > span{
background-color: aqua;
}
</style>
</head>
<body>
<div class="home">
<span>aaa</span>
<div class="content">
<p><span>汉皇重色思倾国，御宇多年求不得。</span></p>
</div>
<div class="box">
<div>
<p><span>天生丽质难自弃，一朝选在君王侧。</span></p>
</div>
</div>
</div>
<span>春寒赐浴华清池，温泉水滑洗凝脂。</span>
</body>
</html>
效果：
5.兄弟选择器
6.选择器组--交集选择器
伪类：
什么是伪类？
Pseudo classes翻译过来是伪类；
伪类是选择器的一种，它用于选择处于特定状态的元素；
动态伪类：
使用举例：
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开)
使用注意：
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是:link、:visited、:hover、:active
除了a元素，:hover、:active也能用在其他元素上
:focus指当前拥有输入焦点的元素（能接收键盘输入)
文本输入框一聚焦后，背景就会变红色
因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active
直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
a{color:red;}相当于a:link、 a:visited、a:hover、a:active、a:focus的color都是red
伪元素：
常用的伪元素有：
:first-line、::first-line
:first-letter、::first-letter
:before、::before
为了区分伪元素和伪类,建议伪元素使用2个冒号，比如::first-line
伪元素 -::before和::after(常用)
::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
常通过content属性来作为一个元素添加修饰性的内容。
