选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分，如 0,0,0,0
一个选择器的具体特殊性如下确定：
1.对于选择器中给定的ID属性值，加 0,1,0,0
2.对于选择器中给定的各个类属性，属性选择，或伪类，加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素，加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性

特殊性 1,0,0,0 大于所有以0开头的特殊性
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势

注意：id选择器和属性选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            div{

                width: 200px;

                height: 200px;

            }

            #test{

                background: deeppink;

            }

            .pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink{

                background: pink;

            }

        </style>

    </head>

    <body>

        <div class="pink" id="test" style="background: black;">

        </div>

    </body>

</html>

2     !important

有时某个声明比较重要，超过了所有其他声明，css2.1就称之为重要声明
并允许在这些声明的结束分号之前插入 !important 来标志

必须要准确的放置 !important ，否则声明无效。 !important 总是要放在声明的最后，即分号的前面

标志为 !important的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明也会被分为一组，非重要声明的冲突也会在其内部解决
如果一个重要声明与非重要声明冲突，胜出的总是重要声明

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            div{

                width: 200px;

                height: 200px;

            }

            div[id].pink{

                background: red!important;

            }

            div[id]{

                background: yellow!important;

            }

            #test{

                background: deeppink;

            }

            .pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink.pink{

                background: pink;

            }

继承：

继承没有特殊性，甚至连0特殊性都没有
0特殊性要比无特殊性来的强

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

                color: pink;

            }

            div{

                width: 200px;

                height: 200px;

            }

        </style>

    </head>

    <body>

        <div class="pink" id="test" style="color: black;">

            <div>

                我是内部的div

            </div>

        </div>

    </body>

</html>

css样式的来源大致有三种
创作人员
读者
用户代理

权重：
读者的重要声明
创作人员的重要声明
创作人员的正常声明
读者的正常声明
用户代理的声明

层叠：
1.找出所有相关的规则，这些规则都包含一个选择器
2.计算声明的优先级
先按来源排序
在按选择器的特殊性排序
最终按顺序

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            div{

                width: 200px;

                height: 200px;

            }

            div[class]{

                background: deeppink;

            }

            div.pink{

                background: pink;

            }

        </style>

    </head>

    <body>

        <div class="pink" id="test" >

            我是div

        </div>

    </body>

</html>

css---6 选择器声明的优先级的更多相关文章

  1. css类选择器类名覆盖优先级

    code <style> .a{ background: red; } .b{ background: yellow; } </style> <div class=&qu ...

  2. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  3. css声明的优先级

    选择器的特殊性 选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分,如0,0,0,0,0 一个选择器的具体特殊性如下确定 1.对于选择器给定的ID属性值,加0,1,0,0 2.对于选择器中给 ...

  4. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  5. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  6. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  7. CSS 从入门到放弃系列：CSS的选择器和优先级

    CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...

  8. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  9. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

随机推荐

  1. python3 递归函数return返回None

    今天写了一个函数,执行之后打印出来的结果是None,不明白,之后百度了一下,这里记一下过程,免得之后再踩坑 #!/usr/bin/python3# -*- coding:utf-8 -*- def b ...

  2. 如何设置linux启动过程中的停止阶段

    设置方法: 1 启动过程中点击“e”键(fedora)或者"tab"(centOS)键进入目标启动项的命令行参数下,移除initrd所在行末尾的"quiet" ...

  3. PDO如何完成事务操作

    起因 无意间翻看极客学院的APP,准备找一些教程看看.看到一篇PDO 安全处理与事务处理,一想对MySQL的事务处理仅仅停留在概念上(知道执行多条语句,其中一个失败了,就会回滚操作).但是把概念变成代 ...

  4. 前端实现预览ppt，word，xls，pdf文件

    1.前端实现pdf文件在线预览功能 ps:刚好工作上有这个需求,所以到处找了一下处理方案,大家有需要可以试一下这几种方案,找到合适自己的 方式一. pdf文件理论上可以在浏览器直接打开预览但是需要打开 ...

  5. MJExtension常用方法

    一.MJExtension第三方框架 我们在iOS开发过程中,我们常常需要将字典数据(也就是JSON数据)与Model模型之间的转化,例如网络请求返回的微博数据.等等,如果我们自己全部手动去创建模型并 ...

  6. JS数组 选定元素slice() slice() 方法可从已有的数组中返回选定的元素。 语法 arrayObject.slice(start,end)

    选定元素slice() slice() 方法可从已有的数组中返回选定的元素. 语法 arrayObject.slice(start,end) 参数说明: 1.返回一个新的数组,包含从 start 到 ...

  7. python操作redis数据

    一.环境安装 1.redispy安装 (automatic) C:\Users\Administrator>pip install redis 2.检测是否安装成功 (automatic) C: ...

  8. vue 学习五 深入了解components（父子组件之间的传值）

    上一章记录了 如何在父组件中向子组件传值,但在实际应用中,往往子组件也要向父组件中传递数据,那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件,并在子组件中使用$emit传递数据 // ...

  9. 去sqlserver日志

    USE [master] GO ALTER DATABASE DNName SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE DNName SET  ...

  10. Dart编程循环

    有时,某些指令需要重复执行.循环是一种理想的方法.循环表示必须重复的一组指令.在循环的上下文中,重复被称为迭代 . 下图说明了循环的分类 让我们开始讨论确定循环.迭代次数是确定/固定的循环称为确定循环 ...