HTML中CSS引用——选择器的使用
一、元素选择器
1、书写格式：标记名{/*生命块*/}
2、所有与该标记匹配的元素，都将应用声明块中的规则
二、类选择器
1、书写格式：.类名{/*声明块*/}
类名为 class的值
2、所有class属性为指定类名的元素，都将应用声明块中的规则
eg:
<p class="color_blue size"> .color_blue{
color: skyblue;
}
.size{
font-size: 50px;
}
一个class标签可以写多个类名，放在class的值中，分隔符为空格
三、ID选择器
1、书写格式：#id值{/*声明块*/}
2、id选择器只会选择一个元素,属性id为指定值的元素，将应用声明块中的规则
3、同一个html文档中，不同的id值不可重复。 即 元素中的id值必须唯一
四、通配符选择器
1、书写格式：*{ }
2、指页面内所有标签都适用的样式
3、范围太广，不适用
五、属性选择器
1、书写格式：input[type="text"]{ }
【扩展】
1、选种以xxx开头的元素
书写格式 元素名[属性名^="属性名开头"]
input[type^="t"]{}
2、选种以xxx结尾的元素
书写格式 元素名[属性名$=属性值结尾的内容]
input[type$="d"]
3、选中包含XXX的元素
书写格式 元素名[属性名*=属性值包含的内容]
input[type*="i"]
六、并集选择器/组合选择器
1、书写格式：元素A+"，"+元素B+"，"+元素C
2、适用于多个不同标签，应用相同的样式
3、声明冲突需要计算层叠机制时，需将每一项分开单独计算
七、伪类选择器
1、在html中不需要添加class属性，直接在CSS中书写
【分类】
1、动态伪类选择器
将链接标签<a>设置样式，书写格式：标签：link{ }
（1）link和visited必须放在最前面（无先后顺序）
（2）link和visited只能用于<a>标签，属于静态伪类选择器
（3）link和visited后面是focus
锁定，将自身的样式变化赋予指定的标签
例：input：focus+span{corlor：deeppink}，鼠标选种input，则span标签的内容变成deeppink
（4）focus后面是hover
（5）hover后面是active
通常情况下，我们会用到1245
{记忆方法：网络通用——爱恨原则：love hate}
l v h a
2、结构伪类选择器
书写格式：元素：nth-child（n）{}
eg：section>p:first-child{}
解释：选种section下的第一个子元素，如果为p元素，则进行样式变化；若不是，则不变
（1）要将奇数和偶数项分开添加样式
元素：nth-child（2n）
选偶数项元素
even
元素：nth-child（2n+1）
选种奇数项元素
odd
（2）只选中前m个同样的元素
元素：nth-child（-n+m）
中间不能插入其他元素
（3）选种A标签下的B元素中的第n个
A>B:nth-of-type(n){}
（4）选种A标签下的B元素中的倒数第n个
A>B:nth-last-of-type(n){}
3、否定伪类选择器
选种除了第n个元素的其他同类元素
元素：not（：nth-child(3)){}
七、伪元素选择器
CSS创建的元素，都是选种元素的子元素
分类
元素：：before{}
选种元素的第一个子元素
元素：：after{}
选种元素的最后一个子元素
元素：：first-line{}
选种元素的第一行
元素：：first-letter{}
选种元素的第一个字
