个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想我对 specificity 和 !important 的工作原理有错误的理解。
考虑以下 HTML:
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class = "outer">
<div class = "inner1">
<div class = "inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam
quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia,
et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do
commodo..</p>
</div>
</div>
</div>
样式.CSS
.outer .inner1 {
color:green !important;
}
样式 1.CSS
.outer .inner1 .inner2 {
color:red ;
}
我的理解是 style.css 中的规则永远不会被覆盖(因为它有一个重要的标签)，即使 syle1.css 中的规则具有更多的特异性。我在想在 HTML 文件中遇到规则时应用它们(首先是 style.css 然后是 style1.css)，并且只有当规则更具体时才会覆盖元素的特定属性的值(重要标签阻止无论后续规则多么具体，这都是最重要的)。这显然不是它的工作原理。有人能告诉我 !important 和 specificity 是如何工作的吗？你什么时候使用 !important ？
最佳答案
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
-- Specificity: Directly targeted elements vs. inherited styles
注意:在演示中添加了新的设计规则集:
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
它有一个非常荒谬的不必要的巨大特异性分数 0,0,7,4 和 !important。 CSS 从右到左读取:
<aside>类为 .inner3 的标签<div>类为 .inner2 .<div class="inner2">必须有 parent <div>类 .inner1 .<div class="inner1">有 parent <div>类 .outer .选择器的所有这些特定规则都必须满足，所以嵌套很深 <aside>标签获取其样式。 .inner3 的任何后代元素将继承color: blue属性和值，但它很容易被 i.inner2 之类的东西覆盖与 color:red .
<div class="inner3">
<p>This deeply nested text has <i class='inner2'>crazy specificity but this text is red.</i>
...
</p>
</div>
注意CSS框底部的新规则集:
div {
color: black !important
}
现在这个选择器是特定于所有 div 所以这里是 !important刚刚分配了一个范围很广的选择器。这可能更像您所期望的行为。
顺便说一句，您可能注意到了重复的类:
.outer.outer.outer
这称为选择器链接，它会增加选择器的特异性分数。参见 Online Specificity Calculator 。
div.outer.outer.outer>div.inner1>div.inner2.inner2>aside.inner3 {
color: blue !important
}
.outer .inner1 {
color: green !important;
}
.outer .inner1 .inner2 {
color: red;
}
div {
color:black !important;
}<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class="outer">
<div class="inner1">
This text will be green...
<div class="inner2">
<p>Voluptate labore cupidatat an enim quamquam ut anim malis, varias id sed veniam quibusdam, singulis aliqua ut singulis domesticarum, id aliqua illum o officia, et ab domesticarum, irure e excepteur o eram nam appellat coniunctione do commodo..
</p>
<aside class='inner3'>
<p>This deeply nested text has <i class='inner1'>crazy specificity</i>, yet it only applies to it and its descendants with no specific <b class='inner2'>`color` property</b>.</p>
</aside>
</div>
...and this text will be green as well.
</div>
</div>关于CSS 特异性和 !important，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50458813/
24
4
0
我正在尝试在 delphi 下创建一个名为 TRange 的通用类。这个想法是，它可以是整数范围或单精度范围或 double 范围等... TRange 对象包含一些 T 类型的变量(maxValue
我对 Javascript 非常陌生，正在寻找一种方法让我的代码仅响应列表中单击的项目。 (完整的 JSFiddle 在这里: http://jsfiddle.net/5cjPF/ ，尽管由于某种原因
我遇到了一个问题，我无法获得使某些代码正常工作所需的特异性级别。我有一个 我想为其制作 的背景悬停在带有花哨的小滑入动画上时会发生变化。 我设法使用 linear-gradient 让它工作得很好用
我在使用一些自定义的 960.gs 类时遇到了一些困难。当我使用子容器时出现问题，子容器的列只是继承主容器列规则的宽度。 在我看来，内部单元格 (foo + bar) 应该是绿色的。这意味着他们应该获
我将第 3 方组件附加到 div 元素(容器)。此 div 元素位于 from 内，表单具有 cssform 类。我使用的主要 CSS 表包含定义: .cssform div { max-wi
我在一个 HTML 元素上有两个 CSS 类:.c-headline-1和 .c-hero__headline .在我的外部样式表中，我使用 .c-headline-1在内部样式表 ( ) 中，我使
我在这里对我的样式表感到非常困惑。我的工作表中有很多特定的链接样式，由于某种原因，当我使用 Chrome 开发工具或 Firebug 检查页面时，其中一个随机样式会被其他样式覆盖。在摆弄 !impor
我正在重新设计我的博客，考虑到响应式网页设计和“移动优先”方法 - 简而言之，我正在尝试使用最小宽度来避免任何类型的复制或 css.. 没有显示:无等.. 我的问题是，当我确实需要覆盖 CSS 值时，
我一直在阅读有关特异性的内容，坦率地说，我很惊讶我之前没有正确了解这一点，因为我亲眼目睹了如果 CSS 声明错误，特异性可能会带来的问题方式。 所以，我对这个主题做了一些研究，现在我了解了计算特异性的
我一直在阅读特异性，坦率地说，令我惊讶的是我之前没有正确地了解这一点，因为我亲眼目睹了如果 CSS 声明错误，特异性会带来的问题方式。 因此，我一直在对该主题进行一些研究，现在我了解了计算特异性的规则
我想使用以下内容来定位我的 div 中最后一个 ul 的最后一个链接 (a)。所以这就是我想到的: #menu ul:last-child li a { /*.....*/ } 我无法手
为什么这两个结果不等价？第一个显示绿色行，而第二个不显示。唯一不同的是html c 还有，nth-child选择器的特殊性是什么？ Stripe Test
我正在制作响应式电子邮件模板，并希望申请 display: block !important至 2 元素，以便从 2 列布局变为 1 列布局。我正在使用以下选择器: td[class="mainArt
我在大学计算机科学系的 Web 开发课上，老师问类(class):“为什么类选择器规则应用在标签选择器规则之上(参见示例代码)？”。我回答说这是因为 CSS 的特殊性，我被告知我错了。他想要的答案是因
这对我来说是一个学习练习，所以在此先感谢您没有告诉我为什么我不想执行以下操作。我不想做，我想明白。 给定以下 CSS: input[type="file"]:focus, input[type="ra
我正在编写一堆 PHP 类，它们将用于创建 Wordpress 插件，但也可以在任何其他环境中使用。在自己测试我的脚本之后，一切似乎都很好，但是当我为它创建一个 WP 插件时，出现了我预见到的 CSS
我简单看了下CSS3 Selectors spec但找不到任何解决这个问题的方法。此外，我没想到当您移动 CSS 声明时结果会发生变化，但它确实发生了变化。任何帮助都会很棒。 div.green_co
假设我有以下 CSS: .InfoTable-main-table tbody tr td:before{ background: #222; color: #fff; c
因 CSS 存在特殊性问题而发疯。HTML。
http://jsfiddle.net/DkAqZ/9 HTML default black text default red link #inner gr
我是一名优秀的程序员,十分优秀！