选择器的使用

选择器

一、常用选择器

1.标签选择器

权重：1

语法：标签名（css样式）

2.class选择器

权重：10

语法：.class名（css样式）

特点：一个标签可以有多个class名，多个标签可以有相同的class名

3.id选择器

权重：1000

语法：#+id名（css样式）

特点：id名是唯一的，一个标签只能有一个，不同的标签id名不能相同

4.后代选择器

权重：几个选择器的权重相加

语法：父选择器 子选择器（css样式）

5.子代选择器

权重：几个选择器权重相加

语法：父代选择器>子代选择器（css样式）

6.组合选择器

权重：每个选择器单独计算

语法：选择器1，选择器2...（css样式）

7.通配符选择器

权重：最小

语法：*{（css样式）}

二、新增选择器

1.伪类选择器

可以理解为描述某元素的某种状态

常用伪类：

（1）hover：鼠标覆盖在元素上

（2）active：鼠标在元素上并按下左键

（3）link：元素链接点击前的样式

（4）visited：元素链接点击后的样式

（5）focus：获取焦点的样式

（6）first-child：第一个子级

（7）first-of-type：特定的第一个子级

（8）last-child：最后一个子级

（9）last-of-type：特定的最后一个子级

（10）nth-child（n）：第n个子元素

（11）nth-of-type（n）：指定类型的第n个子元素

（12）nth-last-child（n）：倒数第n个子元素

（13）nth-last-of-type（n）：指定类型的倒数第二个

2.伪元素选择器

可以理解为某个元素的子元素，但不存在与html中

常用伪元素：

（1）after：元素后的内容

（2）before：元素前的内容

（3）first-line：文本的第一行样式

（4）first-letter：文本的首字母，只用于块元素