CSS选择器优先级 CSS权值

时间  2019-11-09
标签 css 选择器 优先级 权值 栏目 CSS 繁體版
原文   原文链接

计算指定选择器的优先级:从新认识CSS的权重javascript

  1. 通配选择符的权值 0,0,0,0
  2. 标签的权值为 0,0,0,1
  3. 类的权值为 0,0,1,0
  4. 属性选择的权值为 0,0,1,1 0,0,1,0
  5. 伪类选择的权值为 0,0,1,0
  6. 伪对象选择的权值为 0,0,0,1
  7. ID的权值为 0,1,0,0
  8. important的权值为最高 1,0,0,0

使用的规则也很简单，就是 选择器的权值加到一块儿，大的优先；若是权值相同，后定义的优先 。虽然很简单，但若是书写的时候没有注意，很容易就会致使CSS的重复定义，代码冗余。css

从上面咱们能够得出两个关键的因素：html

  1. 权值的大小跟选择器的类型和数量有关
  2. 样式的优先级跟样式的定义顺序有关

总结：java

比较同一级别的个数，数量多的优先级高，若是相同即比较下一级别的个数 ，至于各级别的优先级，你们应该已经很清楚了，就是：node

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承css3

这也就解释了为何11个标签的定义会比不上1个类的定义，1个类加11个标签会比不上2个类的权重高。web

选择器种类chrome

查阅资料概括下大概有以下几种：浏览器

  • 通配选择器app

  • 类型选择器

  • ID选择器

  • 类选择器

  • 包含选择器

  • 子元素选择器

  • 相邻兄弟选择器

  • 属性选择器

css1-css3提供很是丰富的选择器，可是因为某些选择器被各个浏览器支持的状况不同，因此不少选择器在实际css开发中不多用到

 

关于CSS的执行效率：

  1. 样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其余选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者由于不匹配而退出。
  2. 若是你很是在乎页面的性能那千万别使用CSS3选择器。实际上，在全部浏览器中，用 class 和 id 来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child selectors）对页面性能的改善更值得关注。

 

Google 资深web开发工程师Steve Souders对CSS选择器的效率从高到低作了一个排序：

  1. 1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）

  2. 上面九种选择器中ID选择器的效率是最高，而伪类选择器的效率则是最低

选择器的优先权

 

解释：

1.  内联样式表的权值最高 1000；

2.  ID 选择器的权值为 100

3.  Class 类选择器的权值为 10

4.  HTML 标签选择器的权值为 1

 

用选择器的权值进行计算比较，示例以下：

 

<html>
  <head>
    <style type="text/css">
        #redP p {
             /* 权值 = 100+1=101 */
             color:#F00;  /* 红色 */
        }
 
        #redP .red em {
             /* 权值 = 100+10+1=111 */
             color:#00F; /* 蓝色 */
 
        }
 
        #redP p span em {
             /* 权值 = 100+1+1+1=103 */
             color:#FF0;/*黄色*/
        }
    </style>
  </head>
  <body>
     <div id="redP">
        <p class="red">red
           <span><em>em red</em></span>
        </p>
        <p>red</p>
     </div>
  </body>
</html>

 

 

结果：<em> 标签内的数据显示为蓝色。（类选择器的权值要远远大于标签选择器）

 

 

 

CSS 优先级法则：

 

A  选择器都有一个权值，权值越大越优先；

 

B  当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

 

C  创做者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

 

D  继承的CSS 样式不如后来指定的CSS 样式；

 

E  在同一组属性设置中标有“!important”规则的优先级最大；示例以下：

 

<html>
  <head>
    <style type="text/css">
     #redP p{
        /*两个color属性在同一组*/
        color:#00f !important; /* 优先级最大 */
        color:#f00;
     }
    </style>
  </head>
  <body>
     <div id="redP">
       <p>color</p>
       <p>color</p>
     </div>
  </body>
</html>

 

 

 

 

结果：在Firefox 下显示为蓝色；在IE  6 下显示为红色；

 

 

 

使用脚本添加样式

 

当在链接外部样式后，再在其后面使用JavaScript 脚本插入内部样式时（即内部样式使用脚本建立），IE 浏览器就表现出它的另类了。代码以下：

 

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
 
  <!-- 添加外部CSS 样式 -->
  <link rel="stylesheet" href="styles.css" type="text/css" />
  <!-- 在外部的styles.css文件中，代码以下：
       h3 {color:blue;}
  -->
 
  <!-- 使用javascript 建立内部CSS 样式 -->
  <script type="text/javascript">
  <!--
    (function(){
        var agent = window.navigator.userAgent.toLowerCase();
        var is_op = (agent.indexOf("opera") != -1);
        var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
        var is_ch = (agent.indexOf("chrome") != -1);
 
        var cssStr="h3 {color:green;}";
        var s=document.createElement("style");
        var head=document.getElementsByTagName("head").item(0);
        var link=document.getElementsByTagName("link");
        link=link.item(0);
 
        if(is_ie)
        {
            if(link)
                head.insertBefore(s,link);
            else
                head.appendChild(s);
            document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
        }
        else if(is_ch)
        {
            var t=document.createTextNode();
            t.nodeValue=cssStr;
            s.appendChild(t);
            head.insertBefore(s,link);
        }
        else
        {
            s.innerHTML=cssStr;
            head.insertBefore(s,link);
        }
    })();
  //-->
  </script>
</head>
<body>
  <h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3>
</body>
</html>

 

 

 

 

结果：在Firefox / Chrome / Safari / Opera 中，文字都是蓝色的。而在IE 浏览器中，文字倒是绿色的。

 

 

 

附加

 

在IE 中添加样式内容的JavaScript 代码：

 

var s=document.createElement("style");
var head=document.getElementsByTagName("head").item(0);
var link=document.getElementsByTagName("link").item(0);
 
head.insertBefore(s,link);
/* 注意：在IE 中，
   虽然代码是将<style>插入在<link>以前，
   但实际内存中，<style>却在<link>以后。
   这也是“IE中奇怪的应用CSS的BUG”之所在！
*/
 
var oStyleSheet = document.styleSheets[0];
//这实际是在<link>的外部样式中追加
oStyleSheet.addRule("h3","color:green;");
alert(oStyleSheet.rules[0].style.cssText);
alert(document.styleSheets[0].rules[0].style.cssText);
 
//方式2
var cssStr="h3 {color:green;}";
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;

 

 

 

IE 浏览器下载或者渲染的顺序可能以下：

 

●   IE 下载的顺序是从上到下；

 

●   JavaScript 函数的执行会阻塞IE 的下载；

 

●   IE 渲染的顺序也是从上到下；

 

●   IE 的下载和渲染是同时进行的；

 

●   在渲染到页面的某一部分时，其上面的全部部分都已经下载完成（但并非说全部相关联的元素都已经下载完。）

 

●   在下载过程当中，若是遇到某一标签是嵌入文件，而且文件是具备语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独链接进行下载。而且在下载后进行解析，若是JS、CSS中若有重定义，后面定义的函数将覆盖前面定义的函数。

 

●   解析过程当中，中止页面全部往下元素的下载。样式表文件比较特殊，在其下载完成后，将和之前下载的全部样式表一块儿进行解析，解析完成后，将对此前全部元素（含之前已经渲染的）从新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

 

●   Firefox 处理下载和渲染的顺序大致相同，只是在细微之处有些差异，例如：iframe 的渲染。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程