注:文章来源:《css权威指南》 第三章。 部分未予记录

css选择器可以用多种方式去选择元素,实际上一个元素可以由使用两个或者多个规则来匹配,每个规则都有各自的选择器。请看例子

CSS:

    h1 {color: red;}body h1 {color: green;}h2.grade {color: purple;}h2 {color: silver}然后是特别长的一个选择器html > body table tr[id="totals"] td ul > li {color: marron}li#answer {color: lightblue}

各自的效果:

这是h1标签下的内容

这是h2标签下的内容

  • li的Content

这时候你可以根据样式定义去查看上面的效果 这时候,就引出一个话题,css特殊性(权重),大白话就是根据某一种规则,谁的优先级高谁就能够决定选中元素的样式显示。
但是这并不是解决冲突的全部,实际上所有样式冲突的解决都有层叠来决定(后续)。

选择器的特殊性是由选择器本身的构成[css权威指南写作组件]来确定,特殊值由四个组成部分,如 0,0,0,0,一个选择器的具体特殊性或者权重的计算 如下:

  • 对于选择器中给定的各个ID属性值,加 0, 1, 0, 0 
    -----什么意思 就比如说上面的例子: li#answer 就符合规则, li[id="answer"] 不符合规则
  • 对于选择其中给定的各个 类属性值,属性选择 或者 伪类, 加 0, 0, 1, 0
    -----还是拿上面的例子: tr[id="totals"] 符合了属性选择 这一项 ; 类属性值长这样 selector.className ; 伪类自行脑补
  • 对于选择器中给定的 各个元素 和 伪元素, 加 0,0,0,1 
    -----依旧使用上面的例子: html > body table tr[id="totals"] td ul > li {color: marron} 一共7个元素,并且没有伪元素,所以符合规则,加 0, 0, 0, 7
  • 最后一点:结合符和通配选择器 对特殊性没有任何效果。 
    ----- + > 以及* 对特殊性没有作用

这时候我们来计算上面的几个的选择器的权重值

    h1 {color: red;}          0, 0, 0, 1body h1 {color: green;}   0, 0, 0, 2h2.grade {color: purple;} 0, 0, 1, 1 h2 {color: silver}        0, 0, 0, 1然后是特别长的一个选择器html > body table tr[id="totals"] td ul > li {color: marron}  0, 0, 1, 7li#answer {color: lightblue}                                  0, 1, 0, 1 

你可能会奇怪,计算这个特殊性(权重)的时候为什么 第一个位置的值始终为0呢 ? 一般情况下,第一个0是为内联样式声明保留的,它比所有其他声明的特殊性都高。但是请注意关键字!important,它的优先级甚至 高于 内联样式

但是如果特殊性相等的两个规则同时应用到一个元素会怎么样。那么后面的一个有更高的优先级。 
如果样式表中有导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表中的所有声明在后面。

转载于:https://www.cnblogs.com/dongguapifly/p/10627113.html

【CSS】css特殊性-优先级-权重相关推荐

  1. 【CSS笔记】CSS选择器的优先级(权重)

    目录 1.1.选择器的优先级 1.2.CSS选择器权重 1.1.选择器的优先级 CSS选择器的优先级顺序如下所示: 内联样式(style) > id选择器 > class选择器 > ...

  2. CSS 样式优先级权重

    CSS的样式优先级可分为四大类: 1.!important 无论何种引入方式和选择器,优先级都是最高的: 2.行内样式 style="" 行内样式的优先级要高于嵌入和外链,嵌入和外 ...

  3. 0基础快速入门CSS技术栈(4)—图解详细阐述CSS的复合选择器、标签显示模式、行高、CSS背景,及最为重要的CSS三大特性附带权重计算笔试题(附详细案例源码解析过程)

    文章目录 1. 0基础快速入门CSS技术栈(4) 2. 重点提炼 3. CSS复合选择器 3.1 后代选择器(重点) 3.1.1 example01 3.2 子元素选择器 3.2.1 exmaple0 ...

  4. 【CSS】选择器优先级

    CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...

  5. CSS选择器的优先级的相关介绍

    css选择器的优先级 使用不同的选择器,选中同一个元素并且设样式的时候, 这样样式就会产生冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示 优先级规则(权重值 ...

  6. CSS选择器的优先级是怎样的?

    CSS选择器的优先级是:内联 > ID选择器 > 类选择器 > 标签选择器 到具体的计算层面,优先级是由 A .B.C.D 的值来决定的,其中它们的值计算规则如下: A 的值等于 1 ...

  7. CSS 选择器的优先级

    优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定. !important > 行内样式 > ID选择器 > 类选择器=伪类=属性 > ...

  8. CSS选择器及其优先级排序

    一. CSS选择器分类 CSS选择器如下: CSS的选择器其实大类的话可以分为三类,即id选择器.class选择器.标签选择器. 用法如下: id选择器: #id名 { 属性名:属性值; } clas ...

  9. Web开发(一)·期末不挂之第四章·CSS语法基础(CSS选择器选择器优先级各类样式表的使用方法)

    CSS语法基础 一.单纯html控制样式的缺点 二. CSS✪✪✪ CSS概述 CSS基础语法 组成 选择器 标签选择器 类选择器 id选择器 通配选择器 后代选择器 插入样式表的三种方式 行内样式 ...

最新文章

  1. 拼多多谋定500个供应链品牌 农民丰收节交易会“拼农货”
  2. FileSystemObject
  3. 深度学习之基于卷积神经网络实现超大Mnist数据集识别
  4. 隐马尔科夫模型原理解析
  5. 作者:肖戎(1974-),女,广东省地方税务局高级工程师、副处长。
  6. 以父之名想表达什么_科幻电影《猩球崛起3:终极之战》究竟想表达什么?
  7. java泛型 包_Java泛型应用浅析
  8. 21天java基础入门总结
  9. 如何调整pdf的页边距
  10. 图像处理领域公认的重要英文期刊(SCI收录)
  11. 第1142期AI100_机器学习日报(2017-11-03)
  12. 三星推出体积更小的1亿像素图像传感器产品线
  13. 《解构产品经理互联网产品策划入门》PDF+《互联网产品运营产品经理的10堂精英课》PDF分析...
  14. A002-181-2162
  15. oss视频转码处理(解决部分浏览器无法正常播放问题)
  16. C fread()函数
  17. 失物招领网站毕业设计,失物招领网站设计与实现,失物招领论文源码设计分析毕设作品参考
  18. ZJOI2020游记
  19. 密码学研究-Provider
  20. R语言入门教程知识 第一章 R语言

热门文章

  1. 给 TWebBrowser.Document 定义事件
  2. sockets C#
  3. ES6模块与commonJS模块的差异
  4. linux 查看用户上次修改密码的日期
  5. 用 vue2 和 webpack 快速建构 NW.js 项目(1)
  6. 独家直播!阿里移动前端开源框架Weex揭秘
  7. 在VS2012中实现Ext JS的智能提示太简单了
  8. 不要手贱自己去通过Javascript画html界面
  9. VS2008 JS调试和Silverlight 后台代码调试 相互影响的问题。---自己做实例证明
  10. “入洞房与度蜜月”的来历