一,前言:

  刚加的css怎么没有渲染出来?浏览器中查看,发现是被其他的css给覆盖了,相信我们都曾遇到过这样的问题。那么浏览器是如何选择css标签的渲染顺序的呢?换句话说,css选择器的优先级是怎么规定的?

二、正文:

  先上一个例子

<div id = "outerId" class = "outerClass">
<div id = "innererId" class = "innerClass">
<p id = "thisId" class = "thisClass" style = "">这是一个CSS选择器的测试</p>
      <button type = "button" class = "buttonClass">按钮</button>
</div>
</div>

问:有多少种css选择器可以对<p>标签样式产生影响呢?

如果详细的进行分析,排列组合有太多种了,太过麻烦。我们就说说有哪几个类别:

  • 行内样式:        即  style = "font-size: 12px";
  • id选择器:      即  #thisId {font-size: 12px;}
  • class选择器:   即 .thisClass {font-size: 12px;}
  • 元素选择器:    即  p {font-size: 12px;}

如上四种类别都可以对<p>标签的样式产生影响,那么谁先谁后,谁打谁小呢?

有如下两种解释:

  1. 一个selector的权重表示方式:0.0.0.0,按照计算规则给每位填充数字,对应位置相等,则比较下一位;
  2. 也有分别以1000、100、10、1四个权值系数对CSS选择器进行权重计算。
选择器类别 说明 权重表示 权值表示
行内样式 行内只有一个 style = "" (1.0.0.0)  1000
id选择器 selector中使用了几个id,即#的个数 (0.1.0.0)  100
类选择器

类,伪类,以及属性的个数

如: .outerClass .buttonClass[type="button"]:hover{}

选择器中有2个类,1个属性,1个伪类

(0.0.1.0)  10
元素选择器

伪元素和标签元素的个数,如: p:first-child

选择器中有一个标签元素p和一个伪元素first-child

(0.0.0.1)  1

张鑫旭大神的256个class类名选择器干掉一个id选择器实例页面 ,我试了下256个好像也不行。。。

最后的几点说明:
  • !important 表示强制应用该样式,例如:button{ width: 150px !important;},与以上的选择器相遇时,强制使用此样式;
  • 如果比较后权重相同,那么后者覆盖前者,后渲染的胜出;
  • 内联样式  > id选择器样式 > 类选择器样式 > 元素选择器样式;
  • CSS选择器的使用,应该尽量避免使用 !important 和 内联样式;id通常也是与class区分开使用,前者多用于JS中的结点定位,后者多用于CSS选择器。
  • 重中之重,1000/100/10/1这种权值系数的比较方式只是便于理解,真实情况下10个class并不能逆转1个id。

css的优先级和权重问题 以及!important优先级的更多相关文章

  1. css的优先级 和 权重问题 以及 !important 优先级

    css的优先级 和 权重问题 以及 !important 优先级 css选择有多少种? 行内样式(style="") id选择器(#) class选择器(类,伪类) 元素选择器(标 ...

  2. CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

    1.CSS选择器优先级:    !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器        注意:[初级工程师水平] 2. ...

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

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

  4. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  5. css知多少(6)——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

  6. CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...

  7. css知多少(6)——选择器的优先级(转)

    css知多少(6)——选择器的优先级   1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两 ...

  8. HTML+css基础 css选择器 选择器的权重

    css选择器  选择器的权重 在css中,哪个选择器的权重高,就走谁的样式 标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !imp ...

  9. html css的内联样式 内部样式表 外部样式表的优先级

    http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...

随机推荐

  1. autoconf 简单demo试用

    1. 安装工具 yum install -y automake   2. 基本项目 a. 项目参考结构 ├── AUTHORS ├── COPYING ├── ChangeLog ├── Makefi ...

  2. lapis 集成openresty最新版本cjson 问题的解决

    备注:    为了解决安装了lapis.同时又希望使用新版nginx 以及openresty 的特性(stream ...)   1. 解决方法 参考: https://github.com/leaf ...

  3. 编写浏览器和Node.js通用的JavaScript模块

    长期以来JavaScript语言本身不提供模块化的支持, ES6中终于给出了 from, import等关键字来进行模块化的代码组织. 但CommonJS.AMD等规范已经被广为使用,如果希望你的Ja ...

  4. 在 myeclipse中进行连接sql server的测试

    在 myeclipse中,连接 sql server 用的 url connection 与 java 代码 连接的 url值完全相同. (一下为 java的jdbc连接 sql server 成功的 ...

  5. MOSS 2013研究系列---Win2008R2 建立域控时候,报密码不符合要求解决办法

    今天远程给Win2008R2装AD域控的时候,突然报如下的错误页面: 修改了密码,将密码强度设置复杂了,但是,仍然会弹出这个错误页面,估计是因为远程账号的关系,于是再网上搜下了一下,找到了一个解决方案 ...

  6. net start mongodb发生系统错误2 系统找不到指定的文件

    安装mongodb时, 将mongodb 作为系统服务启动 net start mongodb,报错发生系统错误2 系统找不到指定的文件 . 查找原因是因为,系统服务的可执行文件地址有误. 修改服务地 ...

  7. librtmp接收flv流中提取h264码流:根据多个资料汇总

    rtmpdump可以下载rtmp流并保存成flv文件.如果要对流中的音频或视频单独处理,需要根据flv协议分别提取.简单修改rtmpdump代码,增加相应功能.1 提取音频:rtmpdump程序在Do ...

  8. 使用apache common-io 监控文件变化

    package common.io; import org.apache.commons.io.filefilter.FileFilterUtils; import org.apache.common ...

  9. MySQL 慢查询日志切换

    low_query_log_file日志变得很大,对它进项分析变得很不方便,我们就想按天每天产生一个slow_query_log_file文件,每天分析这个日志文件. 如何按天切割呢? 我们想到了这么 ...

  10. css响应式设计

    响应式设计是指在不同分辨率的设备中,网页布局可以自适应的调整.这种弹性化的布局使网站在不同设备中的布局都比较合理,可以为不同终端的用户提供更加舒适的界面和更好的用户体验,其根本理念是使原本 PC 上的 ...