美文网首页
CSS优先级

CSS优先级

作者: 元气满满321 | 来源:发表于2017-08-15 11:18 被阅读32次

首要原则

1.优先级高的样式覆盖优先级低的样式
2.同一优先级的样式,后定义的覆盖先定义的,即后来居上

多重样式间的优先级

就近原则。如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。

一般情况下,优先级如下:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

同一样式表内部的优先级

首先,回顾下CSS选择器的种类

CSS选择器分类.png

正确的优先级排序应该是:
important > 内联样式 > ID > 类 | 伪类 | 属性选择 > 元素 | 伪元素 > 继承 > 通配符
所以表示下就是:
id 1-0-0
类|伪类|属性选择 0-1-0
元素|伪元素 0-0-1
通用选择器* 0-0-0

总结

  • 多重样式间遵循:继承来的样式 < 浏览器缺省设置 < 外部样式表 = 内部样式表 < 内联样式
  • 而在同一样式表中存在:通用选择器* 0-0-0 < 标签选择器,伪元素 0-0-1 < 类选择器,属性选择器,伪类 0-1-0 < ID 选择器 1-0-0 << !important,其中对于组合选择器还要用上面提到的方法进行权重累加后才能判断
  • 首要原则:高优先级覆盖低优先级,同一优先级则后来居上

每天都努力一点点
谢谢你看完


相关文章

  • 前端复习第二周

    主要复习CSS,style来引入css,link来外联css文件 优先级标签内css优先级 > hand内部css...

  • CSS基础

    CSS :层叠样式表(Cascading Style Sheets)。 CSS 书写位置及优先级(优先级按顺序排列...

  • 【CSS优先级与!important】

    CSS样式优先级: 1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高...

  • 定位css 和xpath

    推荐的定位方式的优先级 优先级最高:ID 优先级其次:name 优先级再次:CSS selector 优先级再次:...

  • css的优先级到底是怎么计算的呢?

    浏览器计算css优先级一共有三个阶段 优先级计算的顺序⬇️ CSS规则的重要性和来源 CSS规则的特殊性 CSS规...

  • CSS选择器优先级

    参考文章:优先级- CSS | MDN

  • css选择器优先级以及photoshop快捷键

    css选择器优先级 CSS选择器的优先级:作用的元素一样,样式一样,就会有优先级问题,当优先级相同时,一旦发生重...

  • css-note

    css学习内容 css基础语法 css使用方法 css选择器 css继承与层叠 css优先级 css命名规范 学习...

  • 9. 定位流

    1.css书写方式 书写优先级(同等优先级): !important > 行内 > 外链 = 内嵌 选择器优先级:...

  • CSS常见问题

    CSS优先级算法如何计算? 样式优先级规则: 优先级顺序为:!important>style>权重值权重规则:第一...

网友评论

      本文标题:CSS优先级

      本文链接:https://www.haomeiwen.com/subject/nokmrxtx.html