在CSS中当几个相同的选择器对同一个元素有不同的规则时,该怎么应用这些规则呢?

  答案就是:CSS特殊性(CSS specificity)

  选择器特殊性有选择器本身组成,特殊性由4个数值表述:0, 0, 0, 0,具体特殊性如下:

  1. 对于内联样式声明的特殊性时,加1, 0, 0, 0
  2. 对于选择器中有给定的ID属性值时,加0, 1, 0, 0
  3. 对于选择器中有给定的类属性值、属性选择或伪类,加0, 0, 1, 0
  4. 对于选择器中有各个给定的元素和伪元素时,加0, 0, 0, 1
  5. 结合符和通配符对特殊性没有任何贡献即0, 0, 0, 0

从左到右,属性权重越来越低,1,0,0,0大于任何第一个0开头的特殊值如0,0,0,13

特殊值实例:

#id                         /*0,1,0,0*/
.className {} /*0,0,1,0*/
[attr] /*0,0,1,0*/
[attr="value"] /*0,0,1,0*/
element {} /*0,0,0,1*/
h1{} /*0,0,0,1*/
html > body td[id="totals"] tr ul > li {声明}             /*0,0,1,5*/
li#answer {声明} /*0,1,0,1*/ (winner) h1#selec{声明} /*0,1,0,1*/
<h1 style="color: red">element</h1> /*1,0,0,0*/ (winner)
内联样式特殊性最高

重要性:

  某个样式声明非常重要,可以在声明的结束分号之前加上!important来标志。

p.class {color: #222 !important}         /*winner*/
#id {color: #333

首先,!important必须放到声明最后的分号之前,其次加了!important的声明与非重要声明分开考虑,

且声明冲突时,胜出的总是重要声明。

   

  继承

  继承没有特殊性

  

*color{color: red}
h1#page-title {color: green} <h1 id="page-title">out em<em>in em</em>out em</h1> 结果:
out em in em out em

  通配选择符具有0特殊性,而继承无特殊性,所以em内为绿色

  层叠

   如果元素选择符的特殊性相同:

    1. 按照!important来排序: 读者的重要声明 > 创作人员的重要声明 > 创作人员的正常声明 > 读者正常声明 > 用户代理声明
    2. 按照特殊性排序,较高的特殊性权重大于低的权重
    3. 按照出现顺序,后出现的权重大,样式表中的导入样式表在前,主样式表在后。

   正式由于这种顺序,才有了LOVE HA,一般链接样式按顺序link-visited-hover-active。(LVHA)来排序。

:link {}
:visited {}
:hover {}
:active {}

    因为有相同的特殊性,0,0,1,0。所以与元素匹配的最后一个选择器才会胜出。

假如不按照常用的顺序
:active {}
:hover {}
:link {}
:visited {}

  一个链接的link和visited两种样式肯定有一种会匹配,所以:active和:hover会被覆盖。

:link {}
:hover {}
:visited {}
:active {}
这个顺序下,被访问过的样式都不会有 :hover 样式,因为会被:visited覆盖。 也可以把伪类链接起来,所以可不必担心这些问题
:link {}
:visited {}
:link :hover {}
:visited :hover {}
每个规则都有唯一的链接状态所以不会冲突。

  

CSS选择器的特殊性和LOVE HA的更多相关文章

  1. CSS选择器的特殊性

    在我们为元素添加样式的时候,或多或少会出现一个元素会有几个不同规则的样式.有#id的,有.class,直接标签元素的,还有各种组合起来的选择器.那CSS到底如何解决这些冲突呢,我们这次专门来探讨一下. ...

  2. css选择器的特殊性值

    今天从前端那拿来写好的页面,就开始动工,首先,照旧处理导航栏高亮的问题, 说到处理高亮的问题,不同的人会有不同的方法,比如: //类名为nav的元素下的第n个a元素 .nav a:nth-of-typ ...

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

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

  4. css优先级之特殊性

    在前端开发的时候,css构建样式规则,这个时候我们会遇到一个问题:当我们对同一个元素做多个样式规则,其中发生了冲突的时候,css是如何选择最终呈现的样式 如下: div{ color:red; } d ...

  5. CSS选择器特殊性与重要性

    特殊性 在编写CSS代码的时候,我们会出现多个样式规则作用于同一个元素的情况,例如 <!-- HTML --> <header> <nav class="nav ...

  6. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  7. CSS选择器中的特殊性

    我们来看一下一个简单的例子: <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  8. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  9. css选择器万年不变的优先级和权重

    我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会 ...

随机推荐

  1. 常用数据库的驱动程序和Url地址

    常用数据库的驱动程序及JDBC URL: Oracle数据库: 驱动程序包名:ojdbc6.jar 驱动类的名字:oracle.jdbc.driver.OracleDriver JDBC URL:jd ...

  2. stdcall, cdecl, pascal 区别(转载)

    转载自:http://www.cnblogs.com/lidabo/archive/2012/11/21/2781484.html stdcall, cdecl, pascal 区别 这三个参数都是告 ...

  3. Microsoft Dynamics AX 2012: How to get Company,Customer and Vendor address in AX 2012

    Scenario:  “How to get Addresses of “Customer, Vendor and Company” 1)      First we need to identify ...

  4. web项目的日志打印位置设置

    1, 若在项目中放logback.groovy文件(如: src/test/resource下),则日志会打印到控制台上. logback.groovy 内容如下: // // Built on Fr ...

  5. jQueryEasyUI

    jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...

  6. api.connectionType 判断当前网络技术经验

    使用  api.connectionType 判断当前网络的时候,需要注意,要加入大小写转换,三星返回的网络是大写 3G /** * 返回当前是否联网 * 周枫 * 3g 4g wifi none * ...

  7. LSPCI具体解释分析

    一.PCI简单介绍     PCI是一种外设总线规范.我们先来看一下什么是总线:总线是一种传输信号的路径或信道.典型情况是,总线是连接于一个或多个导体的电气连线,总 线上连接的全部设备可在同一时间收到 ...

  8. Android二维码开源项目zxing用例简化和生成二维码、条形码

    上一篇讲到:Android二维码开源项目zxing编译,编译出来后有一个自带的測试程序:CaptureActivity比較复杂,我仅仅要是把一些不用的东西去掉,用看起来更方便,二维码和条形码的流行性自 ...

  9. redis安装和配置教程phpredis扩展安装测试

    作者:zhanhailiang 日期:2014-10-16 推荐阅读: Redis持久化策略 关于Redis很多其它资料阅读 1. 下载redis-2.8.17.tar.gz:http://downl ...

  10. SpringWeb增删改查

    模型类: package com; public class Model { private int id; private String name; private String dtype; pr ...