css - jQuery UI 奇怪的冗余 CSS 选择器？

Question

为什么 jQueryUI 在他们的 CSS 中定义额外的选择器？

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight

• 第一个选择器是“查找具有 ui-state-highlight 类的任何元素”
• 第二个意思是“找到任何具有类 ui-state-highlight 并且是 ui-widget-content 的子元素的元素”
• 第三个与第二个相似。

最后两个对我来说似乎是多余的，为什么会有这些额外的 CSS 选择器？我错过了什么吗？

Answer 1

你错过了 CSS selector specificity 的概念.这两个具有父类规范的额外选择器在这些上下文中具有更高的优先级，即使后面的 CSS 选择器试图为相同的属性指定不同的值也是如此。

这在像 jQueryUI 这样以重用和灵 active 为目标的框架中尤为重要。

对于您发布的示例，任何人都可以为 .ui-state-highlight 提供不同的边框颜色:

.ui-state-highlight { border-color: red }

但这实际上不会影响具有该类的任何元素和具有ui-widget-content 或ui-widget-header< 的父容器 类，因为更具体的 CSS 选择器适用于这些类。

或者您可以使用不同的颜色来突出显示小部件标题中的元素:

.ui-widget-header .ui-state-highlight { border-color: green }

jQueryUI 有选择地使用少量定义良好的一致类，以便于理解不同的概念(如突出显示)，同时可以在不同的上下文中使用不同的效果(突出显示标题或小部件内容是不同的东西)。