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는 :

간단하게 말해서, 난 내 입력 필드 모두 주위에 빨간색 테두리를하고 싶습니다 그리고 내 텍스트 영역,하지만 나는 또한 선택 우선 순위가 나타나는 이유를 이해하고 싶습니다. 당신이

#emailField input, textarea 

그래서 당신이

body #emailField .ui-.. 

또는 뭔가 유사한 .ui-.. 규칙보다 구체적인하게해야합니다 귀하의 CSS에 입력 부모를 지정했기 때문에

Answer 1

쉼표 선택기에

더 많은 정보는 분배 법칙을 순종하지 않습니다.

a b, c은 a b 및 c과 일치합니다. a c과 동일하지 않습니다. 그것이 ID 선택기를 포함하지 않기 때문에 textarea가 (보다 구체적인 반면

따라서 해당 #emailField input 선택기 (그것이 ID 선택기를 포함하기 때문에) .ui-state-error보다 명확한.

Answer 2

그것은이다. 이 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/