CSS的三大特性

最新推荐文章于 2022-07-20 11:49:47 发布

weixin_45846339

最新推荐文章于 2022-07-20 11:49:47 发布

阅读量175

点赞数

本文链接：https://blog.csdn.net/weixin_45846339/article/details/103480500

版权

#CSS三大特性

层叠性
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		
		div {
			color: skyblue;
			font-size: 12px;
		}

		div {
			color: hotpink;
		}
        </style>
    </head>
    <body>
    <div> 这是一个div框 </div>  
    </body>
</html>

继承性
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			color: pink;
			font-size: 20px;
		}
		
        </style>
    </head>
    <body>
    <div>
    	<p>你想一夜暴富吗</p>
    </div>
    </body>
</html>

优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
       /*  0， 0 ， 0 ， 0  特殊性公式 */
        
        div { 
         /* 标签选择器  0,0,0,1*/
          color: pink;
        }
        
        :first-child { 
         /* 伪类选择器 0,0,1,0 */
          color: green;
        }

        .king { 
         /* 类选择器  0,0,1,0 */
          color: blue;
        }

        #wang { 
         /* id选择器   0,1,0,0 */
          color: red;
        }

        /* 最大的  不是选择器 */

        div {
          color: orange!important;  /* important就是重要的  级别最高 一旦出现优先执行*/
        }
        </style>
   
    </head>
    <body>
    <div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
    </body>
</html>

注意：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

weixin_45846339

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的三大特性

#CSS三大特性层叠性是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠<!DOCTYPE html><html lang="en"&...
复制链接

扫一扫