首页 > 开发 > CSS > 正文

解析CSS编写中的属性优先级问题

2024-07-11 08:33:05
字体:
来源:转载
供稿:网友

当你将一个样式添加到元素上却发现不起作用时,那就是遇到优先级问题了。那么应该如何处理 CSS 优先级问题呢,下面我总结了一些解决 CSS 优先级问题的常用法则。

样式距离
我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式,此时的优先级是:

外部样式 < 内部样式 < 内联样式
这个应该比较容易理解,也就是说离元素距离越近的样式优先级越大。如:

CSS Code复制内容到剪贴板
  1. <style type="text/css">      div{color:blue;} //内部样式   
  2. </style>    <link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
  3. <div style="color:red">my color</div>//内联样式  

此时显示的优先级是 red > blue > green。所以 my color 显示为红色。

特殊的计算方法
假设有下面这段代码:

CSS Code复制内容到剪贴板
  1. <style type="text/css">      div p.classSelector {color: blue}   
  2.   #idselector p {color: red}    </style>   
  3. <div id="idSelector">      <p class="classSelector">my color</p>   
  4. </div>  

我们面对下面的 css,如何判断优先级呢?

CSS Code复制内容到剪贴板
  1. <style type="text/css">      div p.classSelector {color: blue}   
  2.   #idselector p {color: red}    </style>  

这里介绍一种特殊的计算方法:

元素, 伪元素: 1 – (0,0,0,1)
类, 伪类, 属性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
内联样式: 1 – (1,0,0,0)
这里的属性指的是:
2016428111405879.jpg (592×158)

效果如下:
2016428111437471.jpg (452×47)

优先级从上往下依次增加,至于如何计算,同样举例说明:

p: 1个元素– (0,0,0,1)
div: 1个元素 – (0,0,0,1)

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表