CSS选择器

作用：查找标签，设置样式

基础选择器

·标签选择器

·使用标签名作为选择器->选中同名标签设置相同的样式。例如：p,h1,div,a,img...

·特点：选中同名标签设置相同的样式，无法差异化同名标签的样式

·类选择器

作用：查找标签，差异化设置标签的显示效果

步骤：

·定义类选择器->.类名

·使用类选择器->标签添加 class="类名"

注意：

·定义的时候带点，使用类选择器的时候不带点

·一个类选择器可以给多个标签使用

·一个标签可以使用多个类名，只需要将class赋予多个属性值，中间用空格隔开

·类名要见名知意，多个单词可以用-连接，例如：news-hd

·id选择器

作用：查找标签，差异化设置标签的显示效果。

场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式

步骤：

·定义id选择器->#id名

·使用id选择器->标签添加id="id名"

规则：

·同一个id选择器在一个页面只能使用一次

·通配符选择器

作用：查找页面所有标签，设置相同样式

通配符选择器：*{ }，不需要调用，浏览器自动查找页面所有标签，设置相同的样式

使用场景：开发初期用来清除原本样式

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。简单来说就是当用户鼠标滑过时显示的状态

鼠标悬停状态：选择器：hover{ CSS属性 }

任何标签都可以设置悬停状态

伪类-超链接（拓展）

超链接一共有四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时（激活）

提示：如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素

E是任意标签

:nth-child(公式)

功能	公式
偶数标签	2n
奇数标签	2n+1/2n-1
找到5的倍数的标签（n从0开始）	5n
找到第5个以后的标签	n+5
找到第5个以前的标签	-n+5

伪元素选择器

作用：CSS创建虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在E元素里面的前面添加一个伪元素
E::after	在E元素里面的后面添加一个伪元素

注意：

·必须设置content:""属性，用来设置伪元素的内容，如果没有内容引号为空即可

·伪元素默认是行内显示模式

·权重和标签选择器相同