jquery - CSS 特异性和选择性优先级

Question

我正在使用 JQuery UI 创建一个模式窗口，该窗口会弹出并提示您在表单中输入一些信息。如果用户未输入所需信息，则文本字段将以红色突出显示并带有红色边框。

但是，由于我手动更改了字段的边框，因此仅文本区域的边框变为红色。尽管我的输入和文本字段具有相同的 CSS 规则，但我的结果还是有差异。

输入字段错误:

文本区域错误:

CSS:

#emailField input, textarea
{
    padding: .7em;
    border-radius: 5px;
    border: 1px solid #999;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error{
    border: 1px solid #fb483d;
    background: #fef1ec url(/Content/themes/css/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
    color: #cd0a0a;
}

当我通过开发者控制台查看 CSS 时，我发现其中一个优先于另一个。但为什么会有差异呢？

输入字段的 CSS:

文本区域的 CSS:

简单地说，我希望我的输入字段和文本区域周围都有红色边框，但我也想了解为什么似乎有选择性优先级。

Answer 1

逗号选择器不遵守分配属性。

a b, c 匹配 a b 和 c；它不等同于a c。

因此，您的 #emailField input 选择器比 .ui-state-error 更具体(因为它包含 ID 选择器)，而 textarea code> 不太具体(因为它不包含 ID 选择器。