CSS 우선 순위 규칙이 입력 상자의 너비에 올바르게 적용되지 않습니다.

입력 상자의 CSS 우선 순위에 문제가 있습니다. 우선 순위 규칙에 따라 너비를 적용해야하는 동안 너비는 96%입니다. !important을 적용하면 원하는 스타일이 적용됩니다. 그러나 이것은 어떻게 문제를 해결하고 싶지 않습니다.CSS 우선 순위 규칙이 입력 상자의 너비에 올바르게 적용되지 않습니다.

fieldset input[type=text] { 
     width: 96%; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     border-radius: 5px; 
     border: 1px solid #BBBBBB; 
     height: 20px; 
     color: #666666; 
     -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; 
     padding-left: 10px; 
     background-position: 10px 6px; 
     margin: 0; 
     display: block; 
     float: left; 
     margin: 0 10px; 
} 

.standard-size { 
    width: auto ; 
}

이 링크에 따르면 : http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

우선 순위 작품

나는 입력 상자이 방법

<fieldset> 
    <label>Search</label> 
    <input type="text" class="standard-size"> <!-- Referring to this --> 
</fieldset>

에서 구현 그리고이 두 CSS 선언의 영향이 이쪽 (인라인 스타일, ID, 클래스, 요소) . 왼쪽에있는 숫자는 오른쪽에있는 숫자 앞에옵니다. 제 경우

: FIELDSET 입력 [TYPE = 텍스트]로 변환 (0,0,0,2) FIELDSET 입력 2 개 요소 AND .standard 크기가 변환 (0,0,1이기 때문에, 0). 표준 크기는 하나의 CSS 클래스이기 때문에

(0,0,1,0)은 (0,0,0,2)보다 우선해야합니다. 1이 (2)보다 왼쪽에 있기 때문입니다. 그게 더 중요해. 그렇다면 왜 96 %의 폭이 대신됩니까?

은 (당신이 연결 또한 기사에서 언급) 당신은 클래스 선택기에 해당되는 [type=text] 속성 선택을 계산하는 것을 잊었다

출처

2014-01-07 prince

감사 :

fieldset input[type=text] /* 1 attribute, 2 types -> specificity = (0, 0, 1, 2) */ 
.standard-size   /* 1 class    -> specificity = (0, 0, 1, 0) */

동안 속성 선택하고 클래스 선택기가 동일하면 두 번째 유형 선택기가 첫 번째 규칙에서 두 번째 유형 선택기보다 두 번째 중요합니다.

출처

2014-01-07 13:49:28 BoltClock

[type=text]은 속성이므로 (0,0,1,0) (source)을 추가합니다. 따라서 첫 번째 규칙 세트에는 실제로 특이성 (0,0,1,2)이 있으며 이는 (0,0,1,0)보다 큽니다.

출처

2014-01-07 13:51:00 kmoe

CSS 우선 순위 규칙이 입력 상자의 너비에 올바르게 적용되지 않습니다.

답변

관련 문제