7 选择器优先级

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

/*

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

1 内联样式表的权值最高               style=""           1000；

2 统计选择符中的ID属性个数。         #id                100

3 统计选择符中的CLASS属性个数。      .class             10

4 统计选择符中的HTML标签名个数。     标签名              1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

*/


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>css选择器的优先级</title>

</head>

<style>

    /*

    行内选择器:1000  id:100  class:10  标签名:1

    !important

    */

    /*#i1{*/

    /*    color: red;*/

    /*}*/

    /*.c1{*/

    /*    color: gold;*/

    /*}*/

    /*div{*/

    /*    color: blue;*/

    /*}*/

    /*.c2 .c3 .c5{*/

    /*    color: red;*/

    /*}*/

    /* #i2{*/

    /*    color: rebeccapurple;*/

    /* }*/

    /*.c2 .c4 div{*/

    /*    color: green;*/

    /*}*/

    /*.c2 .c3 .c4 div{*/

    /*    color: lightcoral;*/

    /*}*/

    /*.c2 .c4 .c5{*/

    /*    color: lightskyblue;*/

    /*}*/

    /*.c5{*/

    /*     color: chartreuse!important;*/

    /* }*/

</style>

<body>

<div id="i1" class="c1">alvin</div>

<div class="c2">

    <div class="c3">

        <div class="c4">

            <div class="c5" id="i2" style="color: orange">item</div>

        </div>

    </div>

</div>

</body>

</html>

7 CSS选择器优先级的更多相关文章

  1. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS选择器优先级（转）

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  4. day44:CSS选择器优先级&JS基础

      目录 1.CSS选择器优先级 2.补充:margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自 ...

  5. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  6. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  7. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  8. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  9. 导航栏布局时遇到的问题以及解决办法 css选择器优先级

    得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

  10. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. EF Invalid column name 'Discriminator' Invalid column name 'TagCode'.

    参考资料:Invalid column name 'TagCode'. 该异常和Discriminator没关系,一般原因:1.数据库中字段和实体类字段不一致导致的2.创建新增继承于数据库对应的实体类 ...

  2. toml格式配置文件介绍

    toml官方wik toml官方文档 此次文档是以v1.0.0为例,进行说明的.如果使用到的版本不同,直接去官方文档中找对应的版本即可. 谈到配置文件,大家都能说出来好几种,比如常见的ini.xml. ...

  3. 【Azure 应用服务】在App Service中调用外部服务API时需要携带客户端证书，而多次调用的情况下会出现WindowsCryptographicException Keyset does not exist异常

    问题描述 在App Service中调用外部服务API时需要携带客户端证书,而多次调用的情况下会出现WindowsCryptographicException Keyset does not exis ...

  4. PHP项目&MVC文件安全&上传&包含&下载&删除&读取等

    文件安全-文件包含-动态调试-xhcms 1.安装好xhcms,查看index.php文件. 2.存在include关键字,可以存在文件包含漏洞.看上面代码的逻辑,对r的传参添加魔术引号,如果r没有值 ...

  5. [C++] epoll编写的echo服务端

    直接贴代码,代码是运行在Linux上面的,通过 g++ epoll.cpp编译 #include <sys/socket.h> #include <sys/epoll.h> # ...

  6. 【夏令时】用@JsonFormat(pattern = “yyyy-MM-dd“）注解，出生日期竟然年轻了一天

    前言 缘由 用@JsonFormat(pattern = "yyyy-MM-dd")注解,出生日期竟然年轻了一天 艺术源于生活,bug源于开发. 起因是艰苦奋战一个月,测试及验收都 ...

  7. 【教程】navicat配合HTTP通道远程连接SQLite数据库

    前言 缘由 好奇的我想查看服务器上宝塔面板的SQLite数据库 久别一月,特来水文.起因是我看到服务器上搭建的宝塔面板,好奇其中使用的SQLite数据库,想用navicat远程连接看一下,奈何不会玩, ...

  8. ElasticSearch基础介绍(1)

    ## 1. Elasticsearch基本介绍 官网:https://www.elastic.co/cn Elasticsearch(简称ES)是一个基于Apache Lucene(TM)的开源搜索引 ...

  9. 16 Educational Codeforces Round 142 (Rated for Div. 2)C. Min Max Sort（递归、思维、dp）

    C. Min Max Sort 很不错的一道题目,不过脑电波和出题人每对上,\(qwq.\) 正难则反. 我们考虑最后一步是怎么操作的. 最后一步一定是对\(1\)和\(n\)进行操作 那么上一步呢? ...

  10. 3D模型+BI分析，打造全新的交互式3D可视化大屏开发方案

    背景介绍 在数字经济建设和数字化转型的浪潮中,数据可视化大屏已成为各行各业的必备工具.然而,传统的数据大屏往往以图表和指标为主,无法真实地反映复杂的物理世界和数据关系.为了解决这个问题,3D模型可视化 ...