CSS特定性和似乎是选择性优先级

我正在使用JQuery UI创建一个模式窗口，弹出窗口并提示您在表单中输入一些信息。如果用户没有输入所需的信息，那么文本字段将以红色突出显示，并带有红色边框。CSS特定性和似乎是选择性优先级

但是，因为我手动更改了字段的边框，所以textarea的边框只会变为红色。尽管我的输入和文本字段具有相同的CSS规则，但结果却有所不同。

错误的输入字段：

enter image description here

误差多行文本：

enter image description here

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的输入字段：

enter image description here

CSS的textarea的：

enter image description here

简单地说，我想围绕我的两个输入栏红色边框和我的textarea，但我也想明白为什么看起来有选择性的优先权。

来源

2013-10-09 Keven

'的.ui-小窗口内容的.ui -state-error'比'textarea'更具体，这就是为什么textarea的边框被jQuery UI覆盖的原因。另一方面'#emailField input'更具体，因为它包含一个id选择器。唯一的解决方案是让您的选择器更具体的textarea。它需要包含两个类+另一个事物，或一个ID。 –

这是一篇关于CSS特异性的非常好的文章。 http://css-tricks.com/specifics-on-css-specificity/ –

逗号选择

更多信息不服从分配律。

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

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

来源

2013-10-09 15:28:14 SLaks

谢谢。这真的归结为我对逗号选择器的误解。我假设'＃emailField' id被附加到'input'和'textarea'。我现在知道否则... – Keven

这是因为您指定的输入父在你的CSS

#emailField input, textarea

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

body #emailField .ui-..

或类似的东西。在这个http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

来源

2013-10-09 15:27:45 Spokey

我宁愿不使ui规则更具体。所以我的目标是以某种方式使我的自定义规则不那么具体，但仍然具体到只适用于某些元素... – Keven

CSS特定性和似乎是选择性优先级

回答

相关问题