选择器的权重

  • 标签选择器的权重为0001
  • class选择器的权重为0010
  • id选择器的权重为0100
  • 属性选择器的权重为0010
  • 伪类选择器的权重为0010
  • 伪元素选择器的权重为0010
  • 包含选择器的权重：所包含选择器的权重之和
  • 子选择器的权重：所包含选择器的权重之和
  • 交集选择器权重为选择器之和
  • 继承样式的权重为0000
  • 行内样式的权重为1000

测试

<html>

<head>

    <title>DOM Tests</title>

    <style>

        div #test2 {

            color: #fff148;

        }/* id权重高于class，先定义也不会被覆盖 */

        div .test3 {

            color: #fff148;

        }/* 同等权重的情况下，被后定义的css覆盖 */

        .test1 div {

            color: #000;

        }/* 交换选择器顺序，权重不变 *//* (比较基准) */

        div:last-child {

            color: #000;

        }

        div .test4 {

            color: #fff148;

        }/* 同等权重的情况下，后定义的css会覆盖先定义的 */

        .test5 {

            color: #fff148;

        }/* 复合选择器权重等于选择器权重之和 */

         div .test6 {

            color: #fff148;

        }/* 伪类选择器与class选择器权重相同 */

        /*div:last-child {*/

        /*    color: #000;*/

        /*}*/

    </style>

</head>

<body>

<div class="test1">

    <div id="test2"> test</div>

    <div class="test3"> test</div>

    <div class="test4"> test</div>

    <div class="test5"> test</div>

    <div class="test6"> test</div>

</div>

</body>

</html>

测试结果

css复合选择器的权重的更多相关文章

  1. 0013 CSS复合选择器：后代、子代、交集、并集、超链接伪类

    重点: 复合选择器 后代选择器 并集选择器 标签显示模式 CSS背景 背景位置 CSS三大特性 优先级 1. CSS复合选择器 目标 理解 理解css复合选择器分别的应用场景 应用 使用后代选择器给元 ...

  2. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  3. CSS复合选择器

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...

  4. CSS复合选择器是什么？复合选择器是如何工作

    复合选择器介绍 复合选择器其实很好理解,说白了就跟我们生活中的有血缘关系家庭成员一样,通过标签或者class属性或id属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦. 如果是初学者对基本的 ...

  5. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  6. CSS复合选择器，元素的显示模式，CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  7. 514 ，css不同选择器的权重（css层叠的规则）

    !important规则最重要,大于其它规则 行内样式规则,加1000 eg,<html>   <head>  </head>  <body>    & ...

  8. css学习_css复合选择器

    css复合选择器 a.交集选择器  (即...又...:选择器之间不能有空格) p.one{color:red;] b.并集选择器(中间由逗号隔开) p,div{color:red;} c.后代选择器 ...

  9. CSS.01 -- 选择器及相关的属性文本、文字、字体、颜色、

    与html相比,Css支持更丰富的文档外观,Css可以为任何元素的文本和背景设置颜色:允许在任何元素外围设置边框:允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本. 什么是CSS? ...

随机推荐

  1. 加壳软件-Virbox Protector Standalone

    Virbox Protector Standalone 加壳工具 防止代码反编译,更安全,更方便 产品简介 Virbox Protector Standalone提供了强大的代码虚拟化.高级混淆与智能 ...

  2. JDBCUtils相关

    1.之所以使用类加载器InputStream is = JdbcUtils.class.getClassLoader().getResourceAsStream("jdbcInfo.prop ...

  3. 短信外部浏览器H5链接一键跳转微信打开任意站

    今天讲讲微信跳转的那些事情,这项技术最早出现在在线广告上面,可以从外部引流到微信并打开微信内置浏览器然后打开一个指定的网页地址,在这个网页里面可以放任何想推广的内容,可以是引导文案.活动内容,或者是一 ...

  4. java基础语法(三大基础)

    一.标识符 标识符是用于包名.类名.变量名.方法名.对象名.数组名.集合名等的命名:   规则: (1)可以使用英文字母.阿拉伯数字.下划线_.$符号 (2)不能以数字开头 (3)不能使用Java中的 ...

  5. redis----------linux和mac如何安装redis和启动，关闭

    1.打开官网https://redis.io/download.官网有安装命令 2.以下是我的执行过程截图 执行完官网给的命令以后,再执行  make PREFIX=/usr/local/redis ...

  6. 第九届蓝桥杯C/C++B组省赛感想

    因为做了近三年的初赛题,都对了5题+,所以这次比赛前信心满满,心里想最少水个省二没问题.可我怎么知道今年的套路居然和以前不一样了!一题深搜都没有,想想一周前做的第七届初赛题,10题有3.4题深搜题. ...

  7. Python 写了个小程序，耗时一天，结果才100多行

    from selenium import webdriver import selenium.webdriver.support.ui as ui from selenium.webdriver.co ...

  8. selenium webdriver报错 ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接。

    昨天跑的好好的代码,今天突然报错: ConnectionResetError: [WinError 10054] 远程主机强迫关闭了一个现有的连接. 调查一下,原来是Chrome自动升级,而chrom ...

  9. 用Nuget部署程序包

    用Nuget部署程序包 Nuget是.NET程序包管理工具(类似linux下的npm等),程序员可直接用简单的命令行(或VS)下载包.好处: (1)避免类库版本不一致带来的问题.GitHub是管理源代 ...

  10. 命令行创建cocos2d-x的工程

    1. 命令行创建cocos lua工程cocos new MyGame -p com.your_company.mygame -l lua2. 进入工程目录, 编译运行时库cocos compile ...