CSS学习笔记[2]——CSS选择器

选择器类型

• 基础选择器
• 组合选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

基础选择器

• * ；通用选择器，匹配页面任何元素
• #id；id选择器
• .class；类选择器
• element；标签选择器

组合选择器

• E,F； 多元素选择器，用“,”分割，同时匹配元素E或元素F
• E F；后代选择器，用空格分隔，匹配E元素所有的后代（不止子元素）元素F
• E>F; 子元素选择器，用>分隔，匹配E元素的所有直接子元素
• E+F；直接相邻选择器，匹配E元素之后的相邻的同级元素F
• E~F；普通相邻选择器，匹配E元素之后的同级元素F
• .class1.class2；id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素
• element#id；id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素

属性选择器

• E[attr]；匹配所有具有属性attr的元素
• E[attr = value]；匹配属性attr值为value的元素
• E[attr ~= value]；匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
• E[attr ^= value]；匹配属性attr的值以value开头的元素
• E[attr $= value]；匹配属性attr的值以value结尾的元素
• E[attr *= value]；匹配熟悉attr的值包含value的元素

伪类选择器

• :hover
• :active
• :visited
• :link
• :checked
• :focus
• :disabled
• :first-child
• :last-child
• :first-of-type
• :last-of-type
• :nth-of-type(n)

伪元素选择器

• E::first-line
• E::first-letter
• E::before

p::before {
  content: '**';
  color: red;
}

• E::after

选择器优先级

从高到低：

1. 在属性后面使用！important会覆盖页面内任何位置定义的元素样式
2. 作为style熟悉写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义
10. 继承的样式

复杂场景选择器优先级

计算权重

• 行内样式 ==> a
• id选择器 ==> b
• 类、属性、伪类选择器 ==> c
• 标签选择器、伪元素 ==> d