001CSS-选择器与权重

发布于 2022年 01月 18日 22:46

CSS选择器

  1. 基本选择器:
    1. 标签选择器 div{ }
    2. 类选择器 .name { }
    3. id选择器 #name { }
  2. 高级选择器
    1. 后代选择器:div p 代表div中所有的p标签
    2. 交集选择器:div.box {} div.box li {}
    3. 并集选择器:div,p,h1,li { }

CSS两性——继承性与层叠性

继承性

​ CSS中有一部分属性可以被继承,比如文字和文本的属性color,font-size,font-family,font-*,text-*。即便标签本身不设置,也能从父标签里继承属性。

层叠性

​ 在CSS中,层叠性是指当有冲突时,听谁的。这里涉及到权重的问题,id选择器>class选择器>标签选择器,先比较id选择器的个数,谁的id选择器多就选谁,即使其他的有多个class选择器,但是只要id选择器比别人少就不选。

以下面的代码为例:

 <div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我的颜色到底听谁的?</p>
            </div>
        </div>
    </div>

以上三种选择器都可以直接选择到p,此时比较权重,此处div.box2算class选择器1个,标签选择器1个,经比较得出颜色是绿色。

例一

#box1 .box2 .box3 p {
	color: red;
}
#box1 div.box2 div.box3 p {
	color: green; 
}
.box1 #box2 div p {
	color: blue;
}
css id选择器 class选择器 标签选择器
1 2 1
1 2 3
1 1 2

例二

#box1 .box2 .box3 p {
	color: green;
}
.box1 .box2 #box3 p {
	color: blue;
}
.box1 #box2 .box3 p {
	color: red;
}
css id选择器 class选择器 标签选择器
1 2 1
1 2 1
1 2 1

​ 以上权重相同,按谁写在后面,就听谁的,所以结果是红色。

例三

#box1 {
	color: red;
}

.box1 .box2 .box3 {
	color: pink;
}

.box1 #box2 {
	color: green;
}

三种选择器都没有直接选择元素 通过继承让p拥有属性,此时看谁描述的近,所以结果是粉红色。

例四

#box1 #box2 #box3 {
	color: pink;
}

.box1 #box2 #box3 {
	color: green;
}

#box1 .box2 #box3 {
	color: red;
}

三种选择器都没有直接选择元素 通过继承让p拥有属性,此时看谁描述的近,就听谁的假如描述的一样近,此时再比较权重,权重是最高就听谁的,假如权重一样,以代码的顺序为准听后面的。

css id选择器 class选择器 标签选择器
3 0 0
2 1 0
2 1 0

可以看出①中的id选择器为3个,权重最大,所以结果是粉红色。

!important 的使用

比如在下面的例子中,使用继承的方式都能选中p标签,因为就近原则,看谁描述得越近就听谁的,所以字体颜色是绿色。

#box1 {
	color: red;
}
#box1 #box2 .box3 {
	color: green;
}
.box1 .box2 {
	color: orange !important;
}

但是此时!important却不起作用了。

我们把p标签选择器也加上再试试。

#box1 p{
	color: red;
}
#box1 #box2 .box3 p{
	color: green;
}
.box1 .box2 p{
	color: orange !important;
}

可以看出此时的!important生效了。

所以通过以上的例子我们可以得出结论:

!important 可以提升选择器权重

在就近原则中,无法提升继承的权重

推荐文章