我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。 4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表类,伪类和属性选择器,如.content,权值为10。 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。 例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113

CSS选择器的权重与优先规的更多相关文章

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

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

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

    权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”.   原文:http://w ...

  3. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

  4. CSS选择器及其权重

    #转载请留言联系 1.标签选择器 标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中.举例: div{color:red} ...... <div>这是第一个di ...

  5. css选择器的权重

    权重会叠加!

  6. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  7. css优先级和权重

    1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...

  8. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  9. css:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

    最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色 但结果,测 ...

随机推荐

  1. Django模板系统-标签Tags

    for <ul> {% for user in user_list %} <li>{{ user.name }}</li> {% endfor %} </ul ...

  2. PJzhang:今天才搞清身份证、银行卡……的编码规则

    猫宁!!! ​​   之前思考过常见证件的编码规则,抽空查了一下,发现挺有意思.   一般查询证件或者手机号归属地都是直接百度小工具,但是背后的查询机制如何,可能大多人不甚了解.   介绍几种生活中最 ...

  3. 动态赋予java类的属性set与get值

    public class Contact { private String name; private String tel; private attrControl attrC=new attrCo ...

  4. java—字符串比较忽略大小写

    String A = "aaa";String B = "AAA"; A.equalsIgnoreCase(B)

  5. 引用Nuget包Microsoft.EntityFrameworkCore.Tools.DotNet报错

    错误如下 解决方法 使用VS2017或更高版本在改项目右键,选择“编辑xxx.csproj”,并添加如下一句话,就可以成功引用改Nuget包 <PackageReference Include= ...

  6. BUUOJ misc 二维码

    一个二维码,扫一下是提示:secret is here 用binwalk看一下: binwalk QR_code.png DECIMAL HEXADECIMAL DESCRIPTION ------- ...

  7. 【转】.NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现

    作者:Zhang_Xiang 原文地址:.NET Core + Ocelot + IdentityServer4 + Consul 基础架构实现 先决条件 关于 Ocelot 针对使用 .NET 开发 ...

  8. H.Holy Grail ( floyd )(The Preliminary Contest for ICPC Asia Nanjing 2019)

    题意: 给出一个有向图,再给出6条原来不存在的路径,让你在这6条路径上添加一个最小的数,使图不存在负环. 思路: 直接6遍 floyd 输出就行了. #include <bits/stdc++. ...

  9. 使用php过滤emoji表情

    /** * 过滤字符串中表情 * @param $str string 昵称 * @return string */ public function filterEmoji($str) { $str ...

  10. JAVA重载和数组

    Java 重载:相同的方法名,但参数个数或者类型不一样的情况下,自动执行不同的方法 数组:   int[] array=new int[5];  System.out.println(array); ...