css 选择器

一、基础选择器

选择器：css选择html标签的一个工具

将css与html建立联系，那么css就可以控制html的样式。

通配符选择器*

标签选择器 div

标签名=>标签选择器

开发过程中尽可能少的运用，运用范围为最内层的显示层。

<div>
    标签选择器
</div>

div{
    color:yellow;
}

类名选择器 .类名

class名 => 类选择器：布局的主力军

<div class= "div1">
    类名选择器
</div>

.div{
    color:blue;
}

类名选择器的多类名选择器

<div class = "d1 d2">
    多类名选择器
</div>

.d1.d2{
    color:tan;
}

 

id选择器#id

id名=》id选择器；一定要是唯一的。

<div id = "d1">
    id选择器
</div>

#d1{
    color:red
}

 

基础选择器的优先级

优先级指的是在指向同一目标标签的并且发生冲突的情况下，最终被执行的优先级

id选择器>类名选择器>标签选择器>通配符选择器

组合选择器

一、群组选择器

群组选择器，当多个标签使用相同的属性，单独为这些标签添加属性太繁琐了。

二、子代（后代）选择器

根据父子结构控制着目标子标签

明确书写顺序：目标标签，再加上修饰词

语法：父代>子标签

<div class= "sup">
    <div class ="sub">
      <div class = "inner">
            inner
        </div>
    </div>
</div>
​

.sub>.inner{
    color:red;
}

后代选择器用空格

.sup .innner{
    color:green;
}

三、相邻（兄弟）选择器

根据兄弟结构控制下方的兄弟标签

明确目标 = 》添加装饰器

相邻装饰器语法：相连 + 连接

<div class = "d1">
   d1
</div>
<div class = "d2">
    d2
</div>
<div class = "d3">
    d3
</div>

相邻选择器

.d2+d3{
    color:green
}

兄弟选择器

.d1~.d2{
    color:red;
}

 

四、交集选择器

一个标签有多种选择器装饰，通过多种装饰器找到一个目标标签

注：每一个选择器均可以为三个基础选择器中任意一个

<section class = "ss" id = "s">区块域</section>
<section class = "ss" id = "s">区块域</section>
<div class = "ss">区块域</div>
​

 

section.ss#s{
    color:brown
}

属性装饰器

书写格式	效果
[attr]	匹配拥有attr属性的标签
[attr = val]	匹配拥有attr属性，属性值为val的标签
[attr ^= val]	匹配拥有attr属性，属性值以val开头的标签
[attr$ = val]	匹配拥有attr属性，属性值以val结尾的标签
[attr* = val]	匹配拥有attr属性，属性值包含val的标签

<div text-decoration = "center">
    sssss
</div>

[ text-decoration]{
    color:red
}

 

组合选择器的优先级

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

1.优先级取决权重，其实就是比较个数

2.不同装饰符（后代、兄弟、交集。。。）均不影响权重

3.选择器的位置也不影响权重

4.权重的只和个数有关

5.id的权重无限大于class无限大于标签

6.属性选择器的权重与类一样

css选择器

 

一、基础选择器

选择器：css选择html标签的一个工具

将css与html建立联系，那么css就可以控制html的样式。

通配符选择器*

标签选择器 div

标签名=>标签选择器

开发过程中尽可能少的运用，运用范围为最内层的显示层。

<div>
    标签选择器
</div>

div{
    color:yellow;
}

 

类名选择器 .类名

class名 => 类选择器：布局的主力军

<div class= "div1">
    类名选择器
</div>

.div{
    color:blue;
}

类名选择器的多类名选择器

<div class = "d1 d2">
    多类名选择器
</div>

.d1.d2{
    color:tan;
}

 

id选择器#id

id名=》id选择器；一定要是唯一的。

<div id = "d1">
    id选择器
</div>

#d1{
    color:red
}

 

基础选择器的优先级

优先级指的是在指向同一目标标签的并且发生冲突的情况下，最终被执行的优先级

id选择器>类名选择器>标签选择器>通配符选择器

 

组合选择器

一、群组选择器

群组选择器，当多个标签使用相同的属性，单独为这些标签添加属性太繁琐了。

二、子代（后代）选择器

根据父子结构控制着目标子标签

明确书写顺序：目标标签，再加上修饰词

语法：父代>子标签

<div class= "sup">
    <div class ="sub">
      <div class = "inner">
            inner
        </div>
    </div>
</div>
​

.sub>.inner{
    color:red;
}

后代选择器用空格

.sup .innner{
    color:green;
}

三、相邻（兄弟）选择器

根据兄弟结构控制下方的兄弟标签

明确目标 = 》添加装饰器

相邻装饰器语法：相连 + 连接

<div class = "d1">
   d1
</div>
<div class = "d2">
    d2
</div>
<div class = "d3">
    d3
</div>

相邻选择器

.d2+d3{
    color:green
}

兄弟选择器

.d1~.d2{
    color:red;
}

四、交集选择器

一个标签有多种选择器装饰，通过多种装饰器找到一个目标标签

注：每一个选择器均可以为三个基础选择器中任意一个

<section class = "ss" id = "s">区块域</section>
<section class = "ss" id = "s">区块域</section>
<div class = "ss">区块域</div>
​

 

section.ss#s{
    color:brown
}

属性装饰器

书写格式	效果
[attr]	匹配拥有attr属性的标签
[attr = val]	匹配拥有attr属性，属性值为val的标签
[attr ^= val]	匹配拥有attr属性，属性值以val开头的标签
[attr$ = val]	匹配拥有attr属性，属性值以val结尾的标签
[attr* = val]	匹配拥有attr属性，属性值包含val的标签

<div text-decoration = "center">
    sssss
</div>

[ text-decoration]{
    color:red
}

 

组合选择器的优先级

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

1.优先级取决权重，其实就是比较个数

2.不同装饰符（后代、兄弟、交集。。。）均不影响权重

3.选择器的位置也不影响权重

4.权重的只和个数有关

5.id的权重无限大于class无限大于标签

6.属性选择器的权重与类一样