举例详解CSS中的的优先级

时间：2021-05-08

计算优先级

优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同，靠后的 CSS 会应用到元素上。

注意：元素在文档树中的位置是不会影响优先级的
优先级顺序

优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

基于类型的优先级

优先级是根据选择器类型进行计算的. 在下面的例子中,属性选择器尽管选择了一个ID但是在优先级计算法则中还是根据其类型计算。
有如下样式声明:


CSS Code复制内容到剪贴板
  • *#foo{
  • color:green;
  • }
  • *[id="foo"]{
  • color:purple;
  • }

    • 将其应用在下面的HTML中:


    XML/HTML Code复制内容到剪贴板
  • <pid="foo">Iamasampletext.</p>

    • 演示例子：https://jsfiddle.net/donqi/vmo5m3re/
    选择器优先级一致

    优先级相同的情况下，后边定义的会覆盖前边定义的


    XML/HTML Code复制内容到剪贴板
  • <divclass="boxpaddingborder"></div>
  • <divclass="boxborderpadding"></div>
  • <divclass="paddingboxborder"></div>

    • css:


    CSS Code复制内容到剪贴板
  • div{
  • height:100px;
  • width:100px;
  • padding:20px;
  • margin:20px;
  • border:10pxsolidhsla(0,0%,0%,0.5);
  • background-color:#ccc;
  • background-image:url("/favicon.png");
  • background-repeat:space;
  • background-origin:content-box;
  • }
  • div.box{
  • background-clip:content-box;
  • }
  • div.border{
  • background-clip:border-box;
  • }
  • div.padding{
  • background-clip:padding-box;
  • }

    • 演示例子： https://jsfiddle.net/donqi/wvLpwz48/

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章