CSS特异性和什么似乎是选择性优先级

Question

我正在使用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：

Textarea的CSS：

简单地说，我想在输入字段和文本区域周围加上红色边框，但我也想了解为什么看起来有选择性优先级。

Answer 1

这是因为您在CSS

中指定了输入的父级

#emailField input, textarea

因此，您必须使.ui-..规则更具体

body #emailField .ui-..

或类似的东西。

有关此http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

的更多信息

Answer 2

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

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

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