问题标签 [css-specificity]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - 应用于 HTML 元素的样式始终被覆盖
我将样式应用于<html>元素和<body>元素。是否可以让<html>元素上的样式应用于<body的样式？
应用 CSS<html>似乎并不遵循 CSS 特异性的通常规则。这是真的？
示例：http: //jsfiddle.net/59dpy/
尝试使所有背景颜色变为红色。
css - 定义颜色属性的多个类的优先级由声明顺序而不是规范顺序设置
鉴于定义颜色属性的两个具有相同特性的类，我认为元素类属性中列出的最后一个类将优先。
来自http://htmlhelp.com/reference/css/structure.html：
规范的顺序 为方便起见，当两条规则具有相同的权重时，最后指定的规则获胜。
在以下真空代码示例中，定义类规则集的顺序决定了优先级。此处最后一个或最近的类规则集定义优先。
输出文本为绿色。
如果我交换类声明的顺序，并首先声明 .makeGreen
输出文本为蓝色。
我以前从未注意到这一点。编辑我认为编辑元素类属性中列出的最后一个类优先。
编辑 澄清->我有时将元素视为宠物，比如说狗。我看到向元素的类属性添加一个类就像向狗发出命令一样。如果我告诉它坐下，然后告诉它躺下，我希望狗躺下。我不希望这只狗保持坐着，因为我教了它如何坐下（最近才教它如何躺下）。
所以......两个问题。
- 这是应该的吗？回答
- 如果是这样……为什么？我无法看到必须挖掘类声明以确定哪个在另一个之前声明的优势。
非常感谢！
css - CSS 特殊性问题 - 为什么这个选择器优先？
编辑：
在查看了我的 css 之后，我意识到我的头上有一个大洞，而实际问题是一个简单的事实，即我没有在 中定义color规则，所以很明显正在应用bar.css .footer-link:hover颜色规则。foo.css a:hoverCSS 101。谢天谢地，今天是星期五。我显然需要周末。谢谢你的帮助！
在为一个项目开发一些 UI 时，我看到了一些有趣的东西，我确信这与我对 CSS 特异性缺乏了解有关。我已经做了一些研究，但似乎仍然无法解决我自己的问题。
无论如何，我为包含在两个不同样式表中的锚元素定义了几种样式。为简单起见，我将它们称为foo.cssand bar.css。foo.css包含在之前的页面中bar.css
其中foo.css有以下规则：
其中bar.css有以下规则：
HTML 标记是：
似乎hover样式正在被应用，foo.css尽管据我所知，.footer-link:hover具有更高的特异性。正如我所料，正在应用正常的锚样式。
所以我的问题是：
为什么悬停规则会被应用，foo.css即使bar.css页面后面包含并且.footer-link:hover应该比 具有更高的特异性a:hover？
提前致谢！
css - CSS 较低特异性规则覆盖较高特异性规则
我有这个简单的 CSS 代码：
html:
.parent-class正在应用选择器而不是更高的特异性选择器p.child-class。这是为什么？
这是一个小提琴。
编辑
我知道两者具有相同的特异性。在那种情况下，如果我无法编辑父母的班级代码，如何增加孩子班级的特异性？
javascript - 为什么 CSS .addClass 没有根据特性应用适当的样式？
我理解css特异性的概念。这是我的情况：
我有一种名为“成功”的课堂风格。这只会使颜色变成绿色……等等。现在我有 2 个单独的 css 文件来定义 .success （它们定义了不同的样式）。我们将这些称为 Site.css 和 Page.css。
Site.css 中的类很简单：
Page.css 中的类更具体：
现在在 javascript（使用 jquery）中，我添加了一个像这样的类：
现在，当我使用浏览器调试器 (F12) 进行检查时，我可以看到应用了 Site.css 样式（而不是 Page.css）。我认为 Page.css 中定义的类具有更多的特异性，因此它应该是被调用的类。我是否错过了对 CSS 特异性如何工作的理解？
css - CSS 特异性最佳实践：+ 选择器 vs 类 vs 规则覆盖
我有一段这样的 HTML 代码：
根据某些条件，它将以不同的方式放置到页面中，因此我需要给它不同的样式。
它可以像这样放置
情况1
或者
案例2
我想知道什么是更好的方法（如果存在并考虑到最佳实践和性能）来识别这两种不同的情况并#a使用 CSS 规则以不同的方式设置 div 的样式。
我是否应该为每种情况分配两个不同的类，然后检测添加一些这样的 CSS 规则：
或使用 + 选择器之类的特异性选择器：
甚至使用#a应该从 + 选择器覆盖的 div 的默认样式？
提前谢谢你，如果有我没有注意到的类似问题，请原谅我。
html - Joomla 模块 CSS 覆盖
我已经构建了一个 Joomla 模块，但它只是特定计算器的回声。echo 中有一个表格用于格式化。在 Joomla 之外使用整个脚本，一切看起来都很好。但我意识到 Joomla 将它的 CSS 强加在我的表格上。我的 CSS 应该有效并已加载。这很简单：
我已经用 Firebug 进行了检查。但是萤火虫也说我的桌子继承了它的风格
来自我认为的 *beez_20* 模板附带的名为 nature.css 的文件。很烦人的是，只有这个小小的改变会破坏我桌子的整体外观。而且我无法找到如何在不更改模板 CSS 的情况下更改表格样式的解决方案。（因为它只会对我有变化，但对这些安装此模块的用户来说却没有）。所以我想知道为什么 Joomla 不使用我的 CSS 而不是这个，而是用它自己的覆盖它？
css - CSS选择器特异性比较
我正在重新设计第三方平台（MindTouch 4）。在这样做的同时，我试图尽可能广泛地声明所有各种样式属性，以防止页面上原生样式区域的无意扩散。
该平台有一个自定义 SELECT 控件，使用如下标记：
我希望设置字体大小为 14px 的选项文本；本机默认值为 12px。
所以，我写了这个 CSS 规则：
但是，在呈现菜单中的链接时，他们的原生规则仍然获胜：
在 Chrome 中，我可以看到在菜单中呈现链接时会考虑这两个规则，但它们的规则（比我的更早声明）获胜。我对此感到困惑，因为我认为我对特异性有很好的把握。所以，我检查 了我对 规则的理解，并手动计算了两个规则的权重。
我的具有特异性 0131（0 内联样式，1 个 ID，3 个类，1 个元素名称）。
Native 具有特异性 0032（0 个内联样式，0 个 ID，1 个类，2 个元素名称）。（我不确定如何计算媒体选择器在原生规则中的贡献。）
我不在乎您使用什么基础进行数学运算，“0131”大于“0032”。所以，我的规则应该赢。
是的，我可以轻松复制出现在原生规则中的元素链（即“.dropdown li a”），但我认为这是一种脆弱的方法，我认为尽可能广泛地设置样式属性以促进可扩展性很重要并且作为防止在裂缝之间偷看的原生样式的预防措施。
感谢您对解决此问题的任何帮助。我显然有可行的替代方案，所以我在这里要求的是对这两条规则在 CSS 加权系统中的影响的学术解释。
非常感谢。
css - 同样的特异性，考虑到位置后， :first-letter 总是赢？
看看这个 jsfiddle：http: //jsfiddle.net/ZNddz/
第一条规则由一个类选择器和一个pseudo-element选择器 = 11
第二条规则由一个类选择器.letter和一个标签选择器组成span= 11
两条规则具有相同的特殊性，因此有理由相信获胜者应该是最后一种风格。显然事实并非如此。所以我决定background-color在第二条规则中添加一个属性，你可以看到它的高度为 30px。
我从中推断出两个规则都没有选择相同的元素。但是我想对这个大意有一个官方的解释，这有点太奇怪了。
jquery - CSS 特异性和似乎是选择性优先级
我正在使用 JQuery UI 创建一个模式窗口，该窗口会弹出并提示您在表单中输入一些信息。如果用户未输入所需信息，则文本字段将以红色突出显示并带有红色边框。
但是，因为我手动更改了字段的边框，所以 textarea 的边框仅变为红色。即使我的输入和文本字段具有相同的 CSS 规则，我的结果也存在差异。
输入字段错误：
文本区域错误：
CSS：
当我通过开发人员控制台查看 CSS 时，我会看到其中一个优先于另一个。但是为什么会有任何区别呢？
输入字段的 CSS：
文本区域的 CSS：
简而言之，我想在我的输入字段和我的文本区域周围都有一个红色边框，但我也想了解为什么似乎有选择性优先级。