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特定性和似乎是選擇性優先級

回答

相關問題