登录  /  注册
首页 > web前端 > css教程 > 正文

css中优先级的衡量标准是什么?css权重的用法介绍

不言
发布: 2018-08-17 15:28:09
原创
2485人浏览过

本篇文章给大家带来的内容是关于css中优先级的衡量标准是什么?css权重的用法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、背景

CSS有三大特性:层叠性、继承性、优先级

而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题了。

CSS优先级是由CSS权重来作为衡量标准的,权重的计算有一套计算公式,有如下规范:

使用一个4位数的字串来表示级别,从左到右,左边的做大,往右依次递减,且数位之间没有进制,级别之间不可逾越。没有进制的意思是:即使是10个标签的权重相加也不会大于类选择器的权重,类推,十个类选择器的权重也小于id选择器的。

继承 或者 * 的贡献值 0,0,0,0
每个元素(标签)的贡献值 0,0,0,1
每个类、伪类贡献值 0,0,1,0
每个ID贡献值 0,1,0,0,
每个行内式贡献值 1,0,0,0
每个!important 无穷大

二、权重的计算实例

以一下代码为例:

<div>
    <ul>
        <li>1</li>
        <li class="red">2</li>
        <li  class="red" id="blue">3</li>
        <li  class="red" id="blue">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
登录后复制

首先给li以下样式:

div ul li{  /*该选择器的权重是0,0,0,3*/
    width: 200px;
    height: 30px;
    border:1px solid #000;
    background-color: pink;
    }
登录后复制

标签选择器的权重

选择器p ul li是后代选择器,三个标签的权重都是(0,0,0,1 ),因为是同一级选择器,权重可以相加,最后得到p ul li的权重就是(0,0,0,3)。

类选择器的权重

在以上样式的基础上给.red添加样式.red{background-color:red;}效果如下:

权重:类、伪类选择器>标签选择器

id选择器的权重

在以上样式的基础上给id名为blue的li添加样式#blue{background-color:blue;}效果如下:

id选择器>类、伪类选择器>标签选择器

行内样式

在以上样式的基础上给第4个li添加行内样式

<li class="red" id="blue" >4</li>
登录后复制

效果如下:第4个li的背景色只呈现了行内样式的设置,其他的都被覆盖了。

行内样式>id选择器>类、伪类选择器>标签选择器

复合选择器权重计算例如:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2    (2个标签,1个类)

a:hover      -----—>      0,0,1,1     (1个标签,一个伪类)

.nav a       ------>      0,0,1,1   (1个标签,一个类)

#nav p       ----->       0,1,0,1   (1个id,一个标签)
登录后复制

三、总结优先级

总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

需要注意的特殊情况:

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

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

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

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

相关推荐:

css样式权重优先级_html/css_WEB-ITnose

CSS样式之优先级 - 猴子猿

以上就是css中优先级的衡量标准是什么?css权重的用法介绍的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号