选择器~~

选择器

通配符选择器：*{声明块;} *{color: pink;}

元素选择器：<元素名{声明块}>{color: pink;}

类选择器：类名匹配html标签中的class的值 .类名{声明块} .box{color: pink;}

ID 选择器：ID匹配html标签中的ID的值ID是唯一的 #ID{color: pink;}

组合选择器、并集选择器：类名、元素名，ID名{声明块}类名,.元素名,#ID名{color: plum;}

子级选择器：父元素>子元素{声明块}article>section{color: plum;}

后代选择器：祖先元素+空格+后代元素{声明块}article section{color: plum;}

---

【层次选择器】

选择器只会选择据他最近的元素，其他的都是这个元素的条件

兄弟选择器：+紧挨的变 ~下面全变（即使有p标签不会影响）

---

伪类选择器

伪类选择器 P:nth-child(n){color: red;}/* 第n个元素变红 */

• n的起始值为0

• 特殊：

1. 元素名:first-child 第一个元素

2. 元素名:last-child 最后一个元素

3. 元素名:nth-child(odd\2n+1) 奇数项

4. 元素名:nth-child(even\2n) 偶数项

5. 元素名:nth-child(n+m) 后面第m个

6. 元素名:nth-child(-n+m) 前面第m个

7. 元素名:not(:nth-child(n)) 否定第n个

8. 元素名:nth-of-type(n) 先筛选元素名类型在找到第n个

---

动态伪类选择器

​ a标签的状态

• 未访问 link
• 已访问 visited
• 激活 focus（焦点框）
• 悬停 hover
• 点击 active