CSS选择器的权重与优先规则

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢?

   

在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先。

那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法:

   

11221730_PdpN.jpg

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

4个等级的定义如下:

  1. 第一等:代表内联样式,如: style=””,权值为1000。

  2. 第二等:代表ID选择器,如:#content,权值为100。

  3. 第三等:代表类,伪类和属性选择器,如.content,权值为10。

  4. 第四等:代表类型选择器和伪元素选择器,如div  p,权值为1。

   

例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113

下面是一些计算示例:

   

11221731_vxXA.jpg

注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

我们再来看一个具体的例子:假如有以下组样式规则,你能判断出HTML代码中的两个标题是什么颜色吗?

01#content div#main-content h2{
02    color:red;
03}
04
05#content #main-content>h2{
06    color:blue
07}
08body #content div[id="main-content"] h2{
09    color:green;
10}
11
12#main-content div.paragraph h2{
13    color:orange;
14}
15#main-content [class="paragraph"] h2{
16    color:yellow;
17}
18div#main-content div.paragraph h2.first{
19    color:pink;
20}

以下是HTML代码:

01<div id="content">
02    <div id="main-content">
03        <h2>CSS简介</h2>
04        <p>CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。</p>
05        <div class="paragraph">
06            <h2 class="first">使用CSS布局的优点</h2>
07            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
08        </div>
09    </div>



判断出来了么?答案是:两个标题都是红色的!

让我们来一起算算六个样式规则各自的特殊性的值:

  • 第一个特殊性的值=2*100+2*1=202

  • 第二个特殊性的值=2*100+1=201

  • 第三个特殊性的值=1*100+1*10+3*1=113

  • 第四个特殊性的值=1*100+1*10+2*1=112

  • 第五个特殊性的值=1*100+1*10+1*1=111

  • 第六个特殊性的值=1*100+2*10+3*1=123

清楚了吧,第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军,后面一些规则虽然看起来好像更复杂,但特殊性并不是拼谁的选择器表达式写得更长,ID选择器才是王道!

理解选择器的特殊性很重要,特别是在修复bug的时候,因为你需要了解哪些规则优先及其原因。

   

如果你遇到了似乎没有起作用的CSS规则,很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID,从而提高它的特殊性。如果 这能解决问题,就说明样式表中其他地方很可能有更特殊的规则,它覆盖了你的规则。如果是这种情况,你可能需要检查代码,解决特殊性冲突,让代码尽可能简 洁。


转载于:https://my.oschina.net/F08zhoubo/blog/300174

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264501.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《代码之美》第六章:菜鸟的自圆其说

Micheal Feather是我早就攻击过的专家级菜鸟&#xff0c;看过这一章&#xff0c;他在我心目中的高级初学者的形象&#xff0c;已经板上钉钉了。前两天看一本书&#xff0c;讲到调研表明&#xff0c;很多人在自己的领域干了20年&#xff0c;过了前五年&#xff0c;基本就不会再获…

java返回两个string_java – 为什么String.intern()方法返回两个不同的结果?

我有这样的代码&#xff1a;public static void main(String[] args) {String str1 new StringBuilder("计算机").append("软件").toString();System.out.println(str1.intern()str1);String str2 new StringBuilder("ja").append("va&qu…

列表和range、元组

1、listt.append&#xff08;&#xff09;默认追加在后面 2、list.insert&#xff08;索引&#xff0c;“元素”&#xff09;按索引添加 3、list.extend&#xff08;&#xff09;可添加多个字或字母的字符串&#xff0c;也可以是列表 4、list.pop&#xff08;&#xff09;默认删…

gridview添加header

gridview是不能添加header的&#xff0c;这里的解决方法是将listview改造成gridview使用&#xff0c;功能很好用&#xff0c;唯一的缺点是列数不能自适应 示例代码下载地址http://pan.baidu.com/s/1bnmyVZT 该项目是在国外博客看到的&#xff0c;连接 http://www.plattysoft.co…

RedHat下JDK1.6安装-利用alternative实现多版本并存(Ubuntu同理)

虽然本文讲的是RH下面的配置&#xff0c;不过Ubuntu里也是一样的&#xff01; RedHat es下安装过程很简单&#xff0c;Sun下载JDK1.6包&#xff0c;解压&#xff0c;然后rpm安装 安装完后&#xff0c;在etc/profile.d/下建立java.sh&#xff0c;代码如下 JAVA_HOME/usr/java/jd…

java如何添加同名的xml节点_jaxb怎么解析多个同名元素

说明&#xff1a; xml是调用外部系统返回的&#xff0c; 收费服务&#xff0c; 格式无法更改XML格式....................................java 大概格式XmlRootElement(name "INFO")public class OrderResponse {private Status status;private List orderList;pub…

web.xml

1、web.xml学名叫部署描述符文件&#xff0c;是在Servlet规范中定义的&#xff0c;是web应用的配置文件。 2、部署描述符文件就像所有XML文件一样&#xff0c;必须以一个XML头开始。这个头声明可以使用的XML版本并给出文件的字符编码。DOCYTPE声明必须立即出现在此头之后。这个…

Scheme N皇后

(define (range n)(define (recur n)(if ( n -1)()(cons n (recur (- n 1)))))(recur (- n 1)))(define (flatten a)(if (null? a)()(append (car a) (flatten (cdr a)))))(define (safe? x y sln)(if (null? sln)#t(let ((px (car (car sln))) (py (cadr (car sln))))(if (…

python全栈开发学习_day1_计算机五大组成部分及操作系统

一.计算机五大组成部分&#xff1a; 1&#xff09;五大组成&#xff1a; 1.控制器&#xff08;指挥系统&#xff0c;用于控制其他计算机硬件的工作&#xff09; 2.运算器&#xff08;用于数学运算及逻辑运算&#xff09; 3.存储器&#xff08;寄存器&#xff0c;高速缓存&#…

Asp.net如何截屏

在C#案例开发这本书中提到了一个方法 using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; using System.Drawing.Imaging; namespace zhua2 { /// <summary> /// Form1 的摘要…

php bloginfo stylesheeturl,WordPress主题制作–bloginfo函数使用教程

最近在做一款WordPress的主题&#xff0c;由于对PHP知之甚少&#xff0c;所以在制作过程中&#xff0c;还是费了很大劲儿的&#xff0c;现在就把在制作过程中遇到的一些问题逐一分享出来。开篇第一讲&#xff0c;我要分享的是bloginfo函数。这个函数主要是获取站点的相关信息&a…

201671030130+词频统计软件项目报告

&#xff08;一&#xff09;需求分析 根据实验二 软件工程个人项目的要求该软件项目的基本功能要求如下&#xff1a; 1.程序可读入任意英文文本文件&#xff0c;该文件中英文词数大于等于1个。 2.程序需要很壮健&#xff0c;能读取容纳英文原版《哈利波特》10万词以上的文章。 …

php系统维护,软件系统维护主要包含什么

软件系统维护主要包含软件系统正常使用要求与定期维护、软件系统初始化安装的维护准备。软件是用户与硬件之间的接口界面&#xff0c;用户主要是通过软件与计算机进行交流。本文操作环境&#xff1a;windows系统、thinkpad t480电脑。(学习视频分享&#xff1a;编程视频)计算机…

一个C#写的调用外部进程类

2008-05-21 07:00 作者&#xff1a; 肖波 出处&#xff1a; 天极网 C# 调用外部进程的类&#xff0c;网上可以搜出很多来&#xff0c;为什么要再写一遍&#xff0c;实在是因为最近从网上拷贝了一个简单的例程用到项目中&#xff0c;运行有问题&#xff0c;后来研究了半天&#…

lamp平台

LANMP平台LAMP指的Linux&#xff08;操作系统&#xff09;、ApacheHTTP 服务器&#xff0c;MySQL&#xff08;有时也指MariaDB&#xff0c;数据库软件&#xff09; 和PHP&#xff08;有时也是指Perl或Python&#xff09; 的第一个字母&#xff0c;一般用来建立web 服务器。lamp…

在预览fastreport报表之前改变一些报表对象的属性

在预览fastreport报表之前改变一些报表对象的属性 有时候许多报表很可能大同小异&#xff0c;只是有个别地方显示的不同&#xff0c;如报表标题&#xff0c;一些控件标题等等。这样我们只需要设计一次报表&#xff0c;在许多地方调用同一份报表&#xff0c;这时候&#xff0c;我…

centos7 配置静态ip时出现双ip问题解决

1、先用ifconfig&#xff0c;看看有几个网卡 2、执行vi /etc/sysconfig/network-scripts/ifcfg-eth0最后的网卡名字改为实际的 3、静态ip只需要设置着几个地方&#xff0c;BOOTPROTOstatic,特别要注意检查是否有NM_CONTROLLEDno&#xff0c;我就是加了这句重启了就没有两个ip了…

晴天php下载,x.php · 一步晴天/smart - Gitee.com

//get拦截规则$getfilter "\\<.>|<.>|\\b(alert\\(|confirm\\(|expression\\(|prompt\\(|benchmark\s*?\(.*\)|sleep\s*?\(.*\)|\\b(group_)?concat[\\s\\/\\*]*?\\([^\\)]?\\)|\bcase[\s\/\*]*?when[\s\/\*]*?\([^\)]?\)|load_file\s*?\\()|]*?\\…

【编程题目】复杂链表的复制☆

76.复杂链表的复制&#xff08;链表、算法&#xff09;题目&#xff1a;有一个复杂链表&#xff0c;其结点除了有一个 m_pNext 指针指向下一个结点外&#xff0c;还有一个 m_pSibling 指向链表中的任一结点或者 NULL。其结点的 C定义如下&#xff1a;struct ComplexNode{ int m…

我的asp.net学习心得

首先说明&#xff0c;本人仅是初学者&#xff0c;不足之处请见谅。 最开始接触.net时大约是四年前&#xff08;四年前,.net应该有了吧&#xff09;。当时是个老师推荐我学习asp.net的&#xff0c;可事实上当时我对asp.net&#xff0c;甚至制作网页都没有太多概念。 然后大约是两…