CSS样式优先级无法按预期工作 [英] CSS style precedence not working as expected
问题描述
我有两种风格，每种风格在其独立的第三方控件中声明不能一起播放，我甚至不确定为什么这是 - 最终 - 如何让它们按我想要的方式工作。
HTML：
< table&
< tr class =myrow>
< td>正常单元格< / td>
< td class =ui-state-error>错误单元格< / td>
< / tr>
< / table>
CSS：
code> .myrow> td {/ *在网格组件中声明* /
background-color：＃88f;
}
.ui-state-error {/ *在jQuery UI中声明* /
background-color：＃f00;
}
CSS简化以显示确切的错误。 这里是小提琴。
最后的结果是两个单元格显示蓝色背景（FF 46.0）。
但是，我期望 .ui-state-error 更具体的是它直接应用于所讨论的细胞与 .myrow> td 规则，其似乎更一般的第一眼。
无论如何，浏览器决定应用 .myrow> td CSS，我想让它应用 .ui-state -error 。
我怎么能这样做考虑CSS样式本身不在我的控制之下？
$ b $您的规则都直接应用于单元格 - 一个是通过类，其他是通过 元素类型。由于元素类型的选择器有另一个 class 选择器连接到它，它有更多的特异性，因此获胜。
.ui-state-error 选择器的特殊性是010，因为它只有一个类选择器作为复杂选择器的一部分，而 myrow> td 选择器的特异性是011，因为它有一个类和一个元素类型选择器作为复杂选择器的一部分。
下面给出使错误 td 有红色背景的错误。
.myrow > .ui-state-error {
background-color：＃f00;
}
更改上述选择器将 样式 。它将覆盖的特定性比010低的选择器，并且只应用于当它们的祖先具有时。 class ='ui-state-error class ='myrow'
如果 myrow 是特定于主题的类，并且您希望 .ui-state -error 元素为红色而不考虑主题，那么您可以按如下所示更改选择器：
tr> .ui-state-error {
background-color：＃f00;
}
这也具有011的特殊性，将覆盖 .myrow>
为简单起见，下面是如何计算特异性：
- 计算作为完全选择器一部分的id选择器的总数。将此作为
a - 计算作为完整选择器一部分的类，属性和伪类选择器的总数。以
b为例。 - 计算作为完整选择器一部分的元素类型和伪元素选择器的总数。以
c为例。
最后的特殊性是 a + b + c
I have two styles, each declared in its separate 3rd party control that don't play well together and I'm not even sure why that is - and ultimately - how to make them work as I want.
HTML:
<table>
<tr class="myrow">
<td>normal cell</td>
<td class="ui-state-error">error cell</td>
</tr>
</table>
CSS:
.myrow>td { /* declared in the grid component */
background-color: #88f;
}
.ui-state-error { /* declared in jQuery UI */
background-color: #f00;
}
Both HTML & CSS simplified to show the exact error. Here's the fiddle.
The end result here is both cells displaying blue background (FF 46.0).
However, I would expect the .ui-state-error to be more specific as it's applied directly to the cell in question vs. the .myrow>td rule which seems more general at first glance.
Regardless, the browser decides to apply .myrow>td CSS and I want to make it apply the .ui-state-error.
How can I do that considering the fact that CSS styles themselves are not under my control?
Both your rules are applied directly to the cell - one is via the class and other is via the element type. Since the selector with element type has another class selector attached to it, it has more specificity and hence wins.
The specificity of .ui-state-error selector is 010 because it has only one class selector as part of the complex selector whereas the .myrow > td selector's specificity is 011 as it has one class and one element type selector as part of the complex selector.
You can change the selector like given below to make the error td have red background.
.myrow > .ui-state-error {
background-color: #f00;
}
Changing the selector like above will not override all other styles. It will override only selectors that are lower in specificity than 010 and apply only for element which have class='ui-state-error when their ancestor has class='myrow'.
If the myrow is a theme specific class and you want the .ui-state-error elements to be red in color irrespective of the theme then you could change the selector like below:
tr > .ui-state-error {
background-color: #f00;
}
This also has specificity of 011 and would override the .myrow > td.
There is a specificity calculator available at https://specificity.keegan.st/ which you'd find very handy and useful till such time you get completely familiar with the specificity calculations.
To put it simple terms, below is how specificity is calculated:
- Calculate the total number of id selectors that are part of the full selector. Take this as
a - Calculate the total number of class, attribute and pseudo-class selectors that are part of the full selector. Take this as
b. - Calculate the total number of element type and pseudo-element selectors that are part of the full selector. Take this as
c.
The final specificity is a + b + c (concatenation and not sum).
这篇关于CSS样式优先级无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
