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. sql更改表结构并将老数据导入（触发器）

    1 --1.旧表改名 2 ALTER TABLE APP_MULTI_PARAM_test RENAME TO APP_MULTI_PARAM_test_bk; 3 4 --2.创建新表 5 CREA ...

  2. 硬件开发笔记（三）：硬件开发基本流程，制作一个USB转RS232的模块（二）：设计原理图库

    前言   上一篇了解了基本的过程,选型了相关的芯片,本篇描述原理图的设计过程,在原理图设计之前或者过程中需要不断新增原理图元器件.   Allegro.OrCad   Cadence公司针对PCB方面 ...

  3. go词法作用域陷进

    问题 // 创建一些目录,再将目录删除 // 错误写法 var rmdirs []func() for _, dir := range tempDirs() { os.MkdirAll(dir, 07 ...

  4. 【MongoDB】C# .Net MongoDB常用语法

    1.1.驱动安装 使用NuGet包管理器安装MongoDB C#驱动:MongoDB.Driver 1.2. C#连接MongoDB //获取MongoDB连接客户端 MongoClient clie ...

  5. 三分钟数据持久化：Spring Boot, JPA 与 SQLite 的完美融合

    三分钟,迎接一个更加高效和简便的开发体验. 在快节奏的软件开发领域,每一个简化工作流程的机会都不容错过.想要一个无需繁琐配置.能够迅速启动的数据持久化方案吗?这篇文章将是你的首选攻略.在这里,我们将向 ...

  6. [App Service for Windows]通过 KUDU 查看 Tomcat 配置信息

    问题描述 在App Service 中选择了Java Tomcat后,如何查看Azure App Service的Tomcat的配置信息呢? 问题解答 可以通过以下的 3个步骤查看: 第一步:登录 K ...

  7. 【Azure Function App】在ADF(Azure Data Factory)中调用 Azure Function 时候遇见 Failed to get MI access token

    问题描述 在ADF(Azure Data Factory)中,调用Azure Function App中的Function,遇见了 Failed to get MI access token Ther ...

  8. 使用Kubernetes搭建带有ik分词的Elasticsearch集群

    创建好带有Ik分词的es镜像,并上传到镜像仓库中,创建镜像可参考链接中的文档 https://www.cnblogs.com/hi-lijq/p/16895206.html 编写es_cluster- ...

  9. 【架构师视角系列】QConfig配置中心系列之Server端（三）

    声明 原创文章,转载请标注.https://www.cnblogs.com/boycelee/p/17993697 <码头工人的一千零一夜>是一位专注于技术干货分享的博主,追随博主的文章, ...

  10. git 常见命令和资源

    git练习 常用git清单 强制切换分支所指位置 git branch -f main c3强制分支main指向c3 git branch -f main HEAD~3强制分支main指向head的父 ...