问题标签 [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.

0 投票
2 回答
336 浏览

css - 仅为 DOM 的一部分创建样式重置的最佳方法是什么?

我正在尝试创建一个仅针对我的控件的 CSS 重置。所以 HTML 看起来像这样:

CSS是我遇到的麻烦,但我目前正在处理这个:

问题是“.innerImg img”没有像我期望的那样覆盖“.container img”。那么,重置“容器”元素中所有元素的样式,然后在该元素中的类上放置样式的最佳方法是什么?

0 投票
5 回答
20595 浏览

css - 在同一个html文件中使用两个css文件

是否可以在同一个 HTML 文件中使用 2 个具有相同名称的选择器等 CSS 类?如果是这样,在设计元素时如何区分两者?

0 投票
4 回答
34729 浏览

css - CSS 类优先级

今天遇到一个问题后,我对CSS类的优先级提出了疑问。情况如下:

我有一个无序列表,它有一个与之关联的类。标签也定义了LI一些样式。我想LI在单击后更改 s 的样式(通过添加的"selected"类),但从未应用添加的类的样式。这是正常行为还是该代码应该工作?

CSS:

HTML:

列表项的背景颜色"selected"没有改变。如果我不将样式应用于LI元素,但创建另一个类并将其应用于所有列表项,那么情况也是如此。

0 投票
3 回答
640 浏览

css - 优化 CSS:Narrow Definition (#mytable tbody span.myclass) 更好?

我想知道是否有一个“狭隘”的定义,例如

比解析更好/更快

我在某处读到,狭义的定义实际上对 CSS 速度有某种不利影响,但我不记得在哪里而且已经有一段时间了,所以我只想澄清它是否重要,如果重要,哪种解决方案更好/更快。

谢谢!

0 投票
4 回答
36470 浏览

css - CSS特异性:last-child

我想使用以下内容来定位我的 div 中最后一个 ul 的最后一个链接 (a)。于是想到了这个:

我不能手动向那个元素添加一个类,即使我想动态地做,我仍然必须以上述方式定位元素。

任何想法为什么这不起作用?

0 投票
4 回答
71 浏览

html - 按孩子改变特异性

我想将主题标签集成到我的元素中,以便它们以不同的颜色显示。但是由于 css 选择器具有相同的 css 特异性,因此最新的会覆盖之前定义的规则。

这是一个显示我的问题的示例:

这里是我的 CSS

该框应该在某处列出,但是一旦它是另一个颜色定义的子子项,它就应该被覆盖。

谢谢你的帮助!

0 投票
1 回答
251 浏览

html - 计算选择器的特异性(CSS)

我知道要计算选择器的特异性,我们使用三个数字,其中左边的第一个数字是 ID 的数量,第二个数字代表类、伪类和属性的数量,第三个数字代表元素的数量。

我意识到下面的数字被夸大了……ID比类更具体,类比元素更具体,但是特异性为1.0.0的选择器(因此只有一个ID的选择器)会胜过特异性为0.222.0的选择器(具有 222 个类/伪类的选择器)?

0 投票
7 回答
26006 浏览

css - CSS 特异性中的点数是如何计算的

研究特异性我偶然发现了这个博客 - http://www.htmldog.com/guides/cssadvanced/specificity/

它指出特异性是 CSS 的评分系统。它告诉我们元素值 1 分,类值 10 分,ID 值 100 分。它还在上面说这些点是总计的,总量是选择器的特异性。

例如:

body = 1 分
body .wrapper = 11 分
body .wrapper #container = 111 分

因此,使用这些要点,我希望以下 CSS 和 HTML 会导致文本为蓝色:

为什么当 15 个班级等于 150 分而 1 个 ID 等于 100 分时,文本是红色的?

显然,这些点不只是总计。它们是串联的。在此处阅读更多相关信息 - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

这是否意味着我们的选择器中的类 = 0,0,15,0OR 0,1,5,0

(我的直觉告诉我是前者,因为我们知道 ID 选择器的特殊性如下所示0,1,0,0:)

0 投票
4 回答
365 浏览

css - 当父元素有更具体的选择器时,为什么我的子元素不从其父元素继承颜色?

为什么在下面的代码 world中是蓝色而不是红色?

的特异性.my_class0,0,1,0,但它应该继承在 ( )处#my_id特异性较高的颜色。0,1,0,0

0 投票
4 回答
366 浏览

css - 为什么 # 选择器的特异性比任何东西都低?

大粗体大写锁定 TL;DR:

我知道如何确定选择器的特异性,我认为它使用了有缺陷的假设,我可以用有效的集合理论关系来支持我的愤怒,请不要回应解释 W3 计算规则的特异性,请阅读问题<-阅读。

这困扰了我一段时间,当我为一些类似于下面的 HTML 编写样式时:

为什么特异性规则会使选择器“#outer span”比“#inner”更具体?ID 是唯一的,所以当我说“#inner”时,我只能指代一个元素,为什么它不那么具体?我了解确定特异性的规则,我只是想知道这是故意的还是偶然的,以及是否有人知道我如何向编写 css 标准的人提出这个问题。

我应该注意,我知道我可以使用 #outer #inner 来确保最大的特异性,但这似乎首先违背了 ID 的目的。当我编写模板并且我不确定一个 ID 是否会在另一个 ID 中时,这也是一个有问题的解决方案。我不是在寻找解决方法,只是在寻找理论答案。

我的问题是理论,完全基于集合逻辑。尽管我的想法是,如果您为 n 个可能项目中的 1 个项目定义规则,那不是尽可能具体吗?为什么 CSS 选择器的创建者会制定一个可以定义 n 个可能项目中的 m 个项目的规则,其中 m 是 n 的子集作为更具体的规则?

我的想法是,#id 相当于按名称识别 1 个项目,而 #id elm 将通过名称与项目的关系来识别一个组。将命名项目称为比具有命名关系的未命名组更不具体是完全违反直觉的。