CSS优先级（css优先级顺序正确的是）

25-01-24 26

这篇文章主要围绕CSS优先级和css优先级顺序正确的是展开，旨在为您提供一份详细的参考资料。我们将全面介绍CSS优先级的优缺点，解答css优先级顺序正确的是的相关问题，同时也会为您带来#CSS优先级权

这篇文章主要围绕CSS优先级和css优先级顺序正确的是展开，旨在为您提供一份详细的参考资料。我们将全面介绍CSS优先级的优缺点，解答css优先级顺序正确的是的相关问题，同时也会为您带来#CSS 优先级权威指南 #一文彻底搞定CSS优先级、css优先级?、css优先级_html/css_WEB-ITnose、css优先级与垂直居中的实用方法。

本文目录一览：

CSS优先级（css优先级顺序正确的是）
#CSS 优先级权威指南 #一文彻底搞定CSS优先级
css优先级?
css优先级_html/css_WEB-ITnose
css优先级与垂直居中

CSS优先级（css优先级顺序正确的是）

我的网页包含：

<link href="/Content/Site.css" rel="stylesheet" type="text/css" /><style type="text/css">td {    padding-left:10px;} </style>

引用的样式表包含：

.rightColumn * {margin: 0; padding: 0;}

我在rightcolumnID中有一张表格，希望单元格有一些填充。但是，引用的样式表优先于内联样式。我可以通过Firebug直观地看到这一点。如果我关闭padding:0Firebug中的指令，则向左填充将生效。

我该padding-left如何上班？

答案1

小编典典

正如其他人提到的那样，您有一个特异性问题。当确定两个规则中的哪一个优先时，CSS引擎会计算#id每个选择器中的s
数量。如果一个比另一个多，就使用它。否则，它将继续以相同方式比较.classes和tags。在这里，您在样式表规则上有一个类，但在内联规则上没有类，因此样式表优先。

您可以使用来覆盖它!important，但这是在这里使用的巨大锤子。您最好改善内联规则的特异性。根据您的描述，听起来您的.rightColumn元素要么是要么包含a，table并且您希望该表中的单元格具有额外的间距？如果是这样，则您要查找的选择器是“
.rightColumn td”，它比样式表规则更具体，并且具有优先权。

#CSS 优先级权威指南 #一文彻底搞定CSS优先级

CSS 优先级权威指南
- 一、样式应用方式总览
- 二、说在前面
  - Ordering 样式应用顺序规则
  - Inheritance 继承
  - Inline attributes (for SVG elements) SVG元素常用内联属性
  - Style sheets 样式表
    - Specificity or selectors 各种选择器
  - Inline styles 内联样式
  - !important 关键字
    - Overriding inline rules 覆盖内联规则
    - Overriding specificity rules 覆盖特定规则(选择器)
    - Overriding ordering rules 覆盖顺序规则
- 三、图解规则原理
  - CSS样式顺序（优先级）权威指南

CSS 优先级权威指南

是否好奇为什么CSS有时候不生效，在添加!important 关键字后才生效？或者为什么SVG 编辑器适用内联样式而不适用CSS样式表？

一、样式应用方式总览

应用样式到一个元素可以有很多种不同的方法，以下示例以优先级升序排列：

<!-- Inheritance -->
<ghttps://www.jb51.cc/tag/stroke/" target="_blank">stroke: red">
    <rect x="1" y="1" width="10" height="10" /> <!-- inherits stroke: red -->
</g>

<!-- Inline attributes -->
<rect x="1" y="1" width="10" height="10" stroke="red" />

<!-- External style sheet -->
<link rel="stylesheet" href="/blog/css/blog.2c80d6f4b5.css">

<!-- Embedded styles -->
<style>
    rect { stroke: red; }
</style>

<!-- Different specificity or selectors -->
rect { stroke: red; }
.myClass { stroke: red; }
#myID { stroke: red; }

<!-- Inline style -->
<ghttps://www.jb51.cc/tag/stroke/" target="_blank">stroke: red"></g>

<!-- Important keyword -->
<ghttps://www.jb51.cc/tag/stroke/" target="_blank">stroke: red !important"></g>

优先级从高到低：!important关键字 -> 内联样式 -> style标签嵌入 -> 外部css样式表 -> 内联属性 -> 继承

而在内嵌style标签（emdedd）和外部样式表中，又应用了各种选择器（id>class>tags）的优先级规则。

二、说在前面

Ordering 样式应用顺序规则

CSS 样式，总是优先考虑从左到右，从上到下的样式规则

<!-- Blue will be applied because it is on the right -->
<ghttps://www.jb51.cc/tag/stroke/" target="_blank">stroke: red; stroke:blue"></g>

<style>
    g{
        stroke: red;
        stroke: blue; /*Blue will be applied because it is at the bottom*/
    }
</style>

Inheritance 继承

Html 和 SVG 元素都可以继承自其父元素所应用的样式，在所有的样式应用规则种，继承的优先级别最低。也就意味着，如果给子元素设定了样式，那么就会覆盖掉继承自父级元素的样式，即便是继承值有important 关键字。

<ghttps://www.jb51.cc/tag/stroke/" target="_blank">stroke: red!important">
	<!-- Blue will be applied, despite important keyword -->
    <rect x="1" y="1" width="10" height="10" stroke="blue"
</g>

Inline attributes (for SVG elements) SVG元素常用内联属性

对于SVG元素，我们也可以使用用内联属性来应用样式（⚠️ "内联属性" != "内联样式"）。它拥有倒数第二的优先级，意味着外部样式表是可以覆盖其样式规则的。

<rect x="1" y="1" width="10" height="10" stroke="blue" />

大多数SVG编辑器都为了考虑SVG元素的易移植性而使用内联属性，这样就能只拷贝SVG元素，就能携带样式，而不需要单独的去指定样式了。而用户还能通过外部自定义样式表或者其他更高优先级规则实现SVG样式的自定义修改。

Style sheets 样式表

样式表分为外部样式表和style标签嵌入样式表：

<!-- External style sheet -->
<link rel="stylesheet" href="/blog/css/blog.asdafasg2s2.css">

<!-- Embedded styles -->
<style>
    rect { stroke: red; }
</style>

这两种方式实际上是一样的，区别在于一个是写在外部一个是写在html文档style标签内。这种情况下，样式的应用规则自左向右，自上向下。如上例，就是写在style标签种的同样式属性会覆盖外部样式表定义的同属性样式。

Specificity or selectors 各种选择器

在内嵌的style 标签，或者外部引入的样式表，是我们平常开发用到最多的方式。可以通过选择器选定元素以应用样式规则。

选择器的不同，也会影响到样式的应用优先级规则。 id选择器 > class选择器 > tags选择器

选择器的种类很多，关于优先级的考虑其实是比较容易理解的。

一般来说，匹配条件越明细，优先级越高。例如tags选择器能选中所有某种类型的标签，如p标签，但是可能只有部分p元素具有某个class名，而id是唯一的。

再比如，div p a 比 div a 的匹配条件更加明细，因此优先级更高。

更多关于选择器的优先级，见文末【补充图1】

Inline styles 内联样式

内联样式有着第二高的优先级，仅次于!important 关键字。这意味着内联样式只能够被 !important 关键字所覆写。而再内联样式中，同样适用Ordering 顺序规则。

<ghttps://www.jb51.cc/tag/stroke/" target="_blank">stroke: red"></g>

`!important` 关键字

!important 关键字，通常用于覆写其他样式规则。

Overriding inline rules 覆盖内联规则

<style>
    //Important keyword overrides inline styling priority
    rect { stroke: orange !important; }
</style>
<rect x="1" y="1" width="5" height="5"https://www.jb51.cc/tag/stroke/" target="_blank">stroke: green" />

Overriding specificity rules 覆盖特定规则(选择器)

<style>
    .MyClass { stroke: red; }
    //Important keyword override specificity priority
    rect { stroke: orange !important; }
</style>
<rectx="1" y="1" width="5" height="5" />

Overriding ordering rules 覆盖顺序规则

<style>
    //Important keyword override ordering priority
    rect { stroke: orange !important; }
    rect { stroke: red; }
</style>
<rect x="1" y="1" width="5" height="5" />

三、图解规则原理

CSS样式顺序（优先级）权威指南

【译文 + 补充说明】

【参考原文】：link

【图片来源】：https://specifishity.com/

css优先级?

选择器的特殊性值表述为4个部分，用0,0,0,0表示。

ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

css优先级_html/css_WEB-ITnose

css 的specificity 特性或称非凡性，它是衡量一个衡量css值优先级的一个标准，既然作为标准，就具有一套相关的判定规定及计算方式， specificity用一个四位的数字串(css2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。在多个选择符应用于同一个元素上那么specificity值高的最终获得优先级。选择符specificity值列表：

规则：

1. 行内样式优先级Specificity值为1,0,0,0，高于外部定义。

2.!important声明的Specificity值最高；

3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；

立即学习“前端免费学习笔记（深入）”；

4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。

算法：

当遇到多个选择符同时出现时候按选择符得到的Specificity值逐位相加， {数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0} 就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较。

实例分析：

1.div { font-size:12px;}

分析：

1个元素{ div}，Specificity值为0,0,0,1