CSS继承性和层叠性

最新推荐文章于 2025-02-19 13:36:07 发布

原创最新推荐文章于 2025-02-19 13:36:07 发布 · 723 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

1.1 css的继承性

什么叫继承性？

有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。继承性是从自己开始，直到最小的元素。（继承性是从大贯穿到最小的元素。）

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

<style>

.con{

color: aqua;

text-decoration: underline;

line-height: 36px;

font-weight: bolder;

font-style: italic;

}

</style>

</head>

<body>

你好

<br>

</div>

</div>

</body>

所有关于盒子的、定位的、布局的属性都不能继承

<style>

.box{

/* 我给盒子自身设置盒模型的3个属性，不能被它的后代继承使用 */

width: 400px;

height: 400px;

border: 1px solid blue;

}

</style>

</head>

<body>

</div>

</body>

1.5.2 css的层叠性

层叠性：就是css**处理冲突的能力。** 所有的权重计算，没有任何兼容问题！

层叠性是一种能力，就是处理css样式冲突的能力。当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？取决于选择器的权重。

其中基础选择器中，id选择器的权重最大，类选择器的权重次之，标签选择器的最小。

<style>

color: aquamarine;

}

.pp{

color: antiquewhite;

}

#para1{

color: blueviolet;

}

</style>

统计权重重点分析

当选择器，选择上了某个元素的时候，那么要这么统计权重：

id的数量，类的数量，标签的数量

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？取决于选择器的权重。 */

/* 1,1,1 */

#box1 .hezi2 p{

color: red;

}

/* 1,0,3 */

div div #box3 p{

color: aqua;

}

/* 0,3,4 */

div.hezi1 div.hezi2 div.hezi3 p{

color: blue;

}

</style>

</head>

<body>

<p>猜猜我用什么颜色</p>

</div>

</body>

数权重的方法：

（1）先水平方向数每一个选择上的 id的数量、类的数量、标签的数量。

（2）然后，在垂直方向上，比各个选择身上的 id的数量。id比完之后比类。类比完之后比标签。

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？ */

/* 如果权重一样，那么以后出现的为准(谁写在后面用谁的，这个就是我们平时工作中说的就近原则) */

/* 1,1,1 */

#box2 div .pp{

color: aqua;

}

/* 1,1,1 */

#box1 .hezi2 p{

color: brown;

}

</style>

</head>

<body>

<div>

<p class="pp">猜猜我用什么颜色</p>

</div>

</body>

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？ */

/* 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。 */

/* 开始数权重之前，一定要看看是不是真的选中了文字所在的最内层标签，这里，没有选中p，所有权重是0 */

/* 0 */

#hezi1 #hezi2 #hezi3{

color: red;

}

/* 0 */

div.box div.box div.box{

color: blue;

}

/* 0,0,1 */

color: aqua;

}

</style>

</head>

<body>

<p>猜猜我用什么颜色</p>

</div>

</body>

如果大家权重都是**0，如果大家描述的层级都是一样的。最后还是比 id选择器，id选择器的优先级最高。类选择器的优先级其次。

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？ */

/* 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。 */

/* 开始数权重之前，一定要看看是不是真的选中了文字所在的最内层标签，这里，没有选中p，所有权重是0 */

/* 0 */

#hezi1 #hezi2 #hezi3{

color: red;

}

/* 0 */

div.box div.box div.box{

color: blue;

}

</style>

</head>

<body>

<p>猜猜我用什么颜色？</p>

</div>

上面这个案例，p使用的颜色是红色。

如果大家权重都是**0，如果大家描述的层级不同。那么有一个就近原则：谁描述的近，听谁的。

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？ */

/* 开始数权重之前，一定要看看是不是真的选中了文字所在的最内层标签，这里，没有选中p，所有权重是0 */

/* 大家的权重都是0，然后我们比描述层级，描述层级从内往外看， */

/* 0 */

/* #hezi3 ------ 倒数第2层 */

#hezi3{

color: blue;

}

/* 0 */

/* #hezi1 #hezi2 ------ 倒数第3层 */

#hezi1 #hezi2{

color: aqua;

}

</style>

</head>

<body>

<p>猜猜我用什么颜色</p>

</div>

</body>

用了hezi3的颜色

权重问题大总结：

1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。

2）如果没有选中，那么权重是0。如果大家都是0，就近原则。

同一个标签，携带了多个类名，有冲突，和在标签中的挂类名的书序无关，只和css的顺序有关。

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？ */

/* 同一个标签，携带了多个类名，有冲突，和在标签中的挂类名的书序无关，只和css的顺序有关。 */

.spec2{

color: blue;

}

.spec1{

color: aqua;

}

</style>

</head>

<body>

<p class="spec2 spec1">猜猜我用什么颜色</p>

<p class="spec1 spec2">猜猜我用什么颜色</p>

</body>

用了下面的spec1的颜色

!important标记

用来给一个属性提高权重。这个属性的权重就是无穷大。

特别提醒：! important做站的时候，不允许使用。因为会让css写的很乱。

<style>

color: aqua !important;

}

#para1{

color: aquamarine;

}

.spec{

color: bisque;

}

</style>

</head>

<body>

<p class="spec" id="para1">猜猜我用什么颜色</p>

</body>

用了p的颜色

!important不影响就近原则

如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？

答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。

<style>

/* 当不同选择器，对一个标签的使用同一个样式的时候，谁的样式最终使用？ */

/* 0 */

div{

color: aliceblue !important;

}

/* 0 */

ul{

color: aquamarine;

}

</style>

</head>

<body>

<div>

<ul>

<li>猜猜我用什么颜色</li>

</ul>

</div>

</body>

仍然用了ul的颜色