css选择器总结

css选择器

1. 通用选择器 *

2. 标签选择器

3. id 选择器

4. class 类选择器

5. 并集选择器

6. 交集选择器

7. 结构选择器

   ​ 匹配到的都是F元素

   ​ E F : F 元素在E元素的内部

   ​ E > F : F 元素必须为E 元素的子元素 （ 儿子辈）

   ​ E ~ F : F元素 有一个为E 元素的 哥哥 （同级查找，F 元素在 E 元素的后面）

   ​ E + F: F元素前面有一个紧邻的 E 元素（元素相邻选择器（同级））

8. 属性选择器

   ​ 标签都拥有属性，四个通用的属性( attribute )， name / id 、 class 、 style

   [ attr ]: 含有attr 属性的 元素

   [attr *= val] : 含有attr 属性，且值中包含 val 的元素

   [attr ^= val] : 含有attr 属性，且 值以 val 开头的元素

   [ attr $= val] : 含有attr属性， 且 值以 val 结尾的元素

   [ attr = val]: 含有attr 属性， 且 值 为 val的元素

9. 层级选择器

   	匹配都是E 元素
   

   ​ E: first-child E元素为父元素 的第一个子元素

   ​ E：last-child E元素为父元素 的最后一个子元素

   ​ E: nth-child( n ) E元素为父元素的 正数的第n个子元素

   ​ E: nth-last-child( n ) E元素为复原的倒数第n个子元素

   ​ n可以是数字，也可以是关键字（even(偶数) odd（奇数））

10. 伪类选择器 （如果想让四个样式共存， 必须遵循爱恨原则 love hate）

    ​ ：link 未被访问的样式（会读取浏览器的浏览记录）

    ​ ：visited 已被访问后的样式

    ​ ： hover 鼠标移动上去的样式

    ​ ：active 点击瞬间的样式

11. 层级选择器2

    匹配的都是E元素

    ​ E: first - of - type 选择所有的 E 元素， 且 E 元素 为兄弟中 第一个元素

    ​ E: last - of - type 选择所有的 E 元素， 且 E 元素为兄弟中的最后一个元素

    ​ E: nth - of - type( n ) 选择所有的 E 元素，且 E 元素为兄弟中正数的第 n 个子元素

    ​ E: nth - last - of - type ( n ) 选择所有的E元素，且 E 元素为兄弟中倒数的第 n 子元素

12. 伪类选择器补充

    ​ : before 在元素之前插入新的元素

    ​ : after 在元素之后插入新的元素