当使用不同的选择器选中同一个元素并设置相同样式时，这时样式间产生了冲突

最终采用的是哪个选择器？
由选择器的优先级（权重）决定，权重高的优先显示

优先级规则（多个按位置分别进行计算，不进位）：

  • 内联样式：优先级 1,0,0,0
  • id选择器：优先级 0,1,0,0
  • 类和伪类：优先级 0,0,1,0
  • 元素选择器：优先级 0,0,0,1
  • 统配选择器：优先级 0,0,0,0
  • 继承的样式：没有优先级
  • 加了 !important 的样式：优先级无穷大

如果选择器的优先级一样，则使用靠后的样式（按前后顺序来，前面的被后面的覆盖了）

并集选择器的优先级是单独计算的

继承规则：

  • 子元素可以继承父元素设置的样式。
  • 子元素并不是全部样式。比如边框、高度等并不会继承。
  • 继承的规则没有权重

CSS样式的优先级(权重)的更多相关文章

  1. Web前端面试指导(十三)：css样式的优先级是怎么样的？

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  2. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  3. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  4. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  5. 学习了解CSS3发展方向和CSS样式与优先级

    通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...

  6. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

  7. CSS样式选择器优先级

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

  8. CSS 样式的优先级

    1. 同一元素引用了多个样式时,排在后面的样式属性的优先级高 例如,下面的 div,同时引用了 [.default] 和 [.user] 中的样式,其中 [.user] 样式中的 width 属性会替 ...

  9. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

随机推荐

  1. 交叉连接（CROSS JOIN）

    除了在FROM子句中使用逗号间隔连接的表外,SQL还支持另一种被称为交叉连接的操作,它们都返回被连接的两个表所有数据行的笛卡尔积,返回到的数据行数等于第一个表中符合查询条件的数据行数乘以第二个表中符合 ...

  2. 1.rest之@Get和@Post请求的区别：

    区别: (1)@Get 一般用于查询或获取资源信息, @Post一般是用于更新资源信息. (2)Url不同, @Get 请求的url: http://localhost:8080/imeter-cms ...

  3. 【资料】哈代&拉马努金相关，悼文，哈佛演讲，及各种杂七杂八资料整理

    悼文和哈佛演讲,因为有一堆公式所以实在懒得放lofter了. 信件和其他资料翻译在这里放个备份,基本上来自<Ramanujan:Letters and commentary>和<Ra ...

  4. php curl请求 header头携带参数

    $headers = array(    'api-key:'.$key,    'authorization:'.$authorization,      ); //初始化    $curl = c ...

  5. RTMP 协议规范(中文版)

    本文是为截至发稿时止最新 Adobe 官方公布的 RTMP 规范.本文包含 RTMP 规范的全部内容.是第一个比较全面的 RTMP 规范的中译本.由于成文时间仓促,加上作者知识面所限,翻译错误之处在所 ...

  6. CMD命令行实现复制一张图片1000份：

    CMD命令行实现复制一张图片1000份: 进入CMD命令行后,进入图片所在目录,执行以下命令: FOR /L %i IN (,,) DO COPY .jpg %i.jpg 模板图片名字为1.jpg,执 ...

  7. 265. 粉刷房子 II

    Q: A: 首先这题可以和粉刷房子这题一样解法,对于i号房子,遍历k种颜色,对于每一种,都去找i-1号房子除该颜色之外的最小花费.但上一题是3种颜色,总复杂度O(N),这题k种颜色,复杂度O(NK^2 ...

  8. Java与Web前端发展前景及薪资对比

    Web前端和Java谁的薪资待遇高?关于这个问题,是很多网友都感兴趣的,在各大论坛贴吧上也看到了不少类似的问题. 现在的互联网行业飞速发展,因此有很多小伙伴想要进入IT行业分一杯羹,但是关于学习什么技 ...

  9. HTML前端入门归纳——样式

    本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...

  10. AcWing 869. 试除法求约数

    #include <iostream> #include <algorithm> #include <vector> using namespace std; ve ...