CSS 特异性和似乎是选择性优先级答案

【问题标题】：CSS Specificity and what appears to be selective priorityCSS 特异性和似乎是选择性优先级
【发布时间】：2013-10-09 15:24:05
【问题描述】：

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

但是，因为我手动更改了字段的边框，所以 textarea 的边框仅变为红色。即使我的输入和文本字段具有相同的 CSS 规则，我的结果还是存在差异。

输入字段错误：

Textarea 错误：

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：

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

【问题讨论】：

.ui-widget-content .ui-state-error 比textarea 更具体，这就是为什么 jQuery UI 会覆盖 textarea 的边框的原因。另一方面，#emailField input 更具体，因为它包含一个 id 选择器。唯一的解决方案是使您的 textarea 选择器更具体。它需要包含两个类 + 1 个其他东西，或者一个 id。
这是一篇关于 css 特异性的非常好的文章。 css-tricks.com/specifics-on-css-specificity

标签： jquery html css css-specificity

【解决方案1】：

逗号选择器不服从分配属性。

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

因此，您的 #emailField input 选择器比 .ui-state-error 更具体（因为它包含一个 ID 选择器），而 textarea 不太具体（因为它不包括一个 ID 选择器。

【讨论】：

谢谢。这真的归结为我对逗号选择器的误解。我假设#emailField id 被附加到input 和textarea。我现在知道了……

【解决方案2】：

这是因为您在 CSS 中指定了输入的父级

#emailField input, textarea

所以你必须使.ui-.. 规则更具体

body #emailField .ui-..

或类似的东西。

【讨论】：

我不想让 ui 规则更具体。所以我的目标是以某种方式使我的自定义规则不那么具体，但仍然足够具体，它只适用于某些元素......