美文网首页
CSS 优先级

CSS 优先级

作者: Levid_GC | 来源:发表于2020-03-18 16:35 被阅读0次

本文内容根据 CSS Specificity 整理。

首先,根据优先级从高到低,分为以下三类:

A. ID 选择器(例如,#example
B. 类选择器 (例如,.example),属性选择器(例如,[type="radio"])和伪类(例如,:hover
C. 类型选择器(例如,h1)和伪元素(例如,::before

接下来,我们要想查看一个选择器中各个优先级类别有多少个,使用 A-B-C 这个形式表示。例如:

  • x-0-0:x 表示 ID 选择器的数量。
  • 0-x-0:x 表示类、属性和伪类选择器的数量。
  • 0-0-x:x 表示类型和伪元素的数量。
  • *, +, >, ~:全局选择器没有值,当结合了其它选择器时,它们不会提升优先级。
  • :not(x):反选伪类选择器没有值,但是传递的参数会提升优先级。

示例

  • * - 0-0-0
  • div - 0-0-1
  • li > ul - 0-0-2
  • .myclass - 0-1-0
  • *.myclass - 0-1-0
    * 全局选择器没有值
  • *[type:checkbox] - 0-1-0
  • :only-of-type - 0-1-0
  • li.myclass - 0-1-1
  • li[attr] - 0-1-1
  • li:nth-of-type(3n)~li - 0-1-2
  • form input[type=email] - 0-1-2
  • li.class:nth-of-type(3n) - 0-2-1
  • input[type]:not(.class) - 0-2-1
  • #myDiv - 1-0-0
  • #myDiv li.class a[href] - 1-2-2
  • #divitis #myDiv a - 2-0-1
  • style="" - 1-0-0-0
  • !important - 1-0-0-0-0

最后两个都已经不按规则出牌了,明显超出 ID 选择器的优先级了,所以使用它们的时候需要慎重思考。

参考资料

相关文章

  • 前端复习第二周

    主要复习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/alrqyhtx.html