009 CSS选择器

CSS选择器

一、基础选择器

1、通配选择器

* {
    border: solid;
}
匹配文档中所有标签：通常指html、body及body中所有显示类的标签

2、标签选择器

div {
    background-color: yellow;
}
匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span

3、类选择器

.red {
    color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配

4、id选择器

#div {
    text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配

二、基础选择器优先级

• 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
• 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
• 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器

v_hint：id选择器必须保证单文档的唯一性

三、组合选择器

1、群组选择器

div, span, .red, #div {
    color: red;
}

• 一次性控制多个选择器
• 选择器之间以,隔开，每一个选择器位均可以为任意合法选择器或选择器组合

2、子代(后代)选择器

子代选择器用>连接
body > div {
    color: red;
}
后代选择器用空格连接
.sup .sub {
    color: red;
}

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 子代选择器必须为一级父子嵌套关系，后代选择器可以为一级及多级父子嵌套关系

3、相邻(兄弟)选择器

相邻选择器用+连接
.d1 + .d2 {
    color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
    color: red;
}

• 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
• 每一个选择器位均可以为任意合法选择器或选择器组合
• 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

四、组合选择器优先级

• 组合选择器优先级与权值相关，权值为权重和
• 权重对应关系

选择器	权重
通配	1
标签	10
类、属性	100
id	1000
!important	10000

• 选择器权值比较，只关心权重和，不更新选择器位置
• 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合

五、属性选择器

• [attr]：匹配拥有attr属性的标签
• [attr=val]：匹配拥有attr属性，属性值为val的标签
• [attr^=val]：匹配拥有attr属性，属性值以val开头的标签
• [attr$=val]：匹配拥有attr属性，属性值以val结尾的标签
• [attr*=val]：匹配拥有attr属性，属性值包含val的标签

v_hint：属性选择器权重等价于类

v_test：掌握所有选择器，并熟知选择器优先级