CSS의 우선 순위를 변경하는 방법 (사용하지 않는 것이 중요!)

Question

를 CSS 아래와 같은 경우 :

input[type="text"] 
{ 
    border: 1px solid green; 
} 

.text 
{ 
    border: 1px solid red ; 
} 

그리고 HTML 아래와 같은 경우 : 텍스트 상자의

<div> 
<input type="text" class="text"/> 
</div>​ 

border-color 녹색입니다. "요소"가 더 높은 우선 순위를 가진 것으로 보입니다.
.class를 유효하게 만드는 방법은 무엇입니까? !important을 사용해야합니까?

다른 선택 사항이 있습니까?

---

나는 CSS 코드 아래 테스트 :

input[type="text"] 
{ 
    border: 1px solid green; 
} 

input[type="text"] .text 
{ 
    border: 1px solid red; 
} 

HTML 코드를 :

<div> 
    <input type="text" class="text"/> 
</div> 

이 맞춰봐 여전히

녹색?.

'input [type = "text"] .text'에서 공백을 제거하면 [type = "text"] 입력이됩니다. 괜찮습니다. 테두리 색상은 빨간색입니다.

Answer 1

CSS의 C은 계단식 연결을 나타냅니다. 다른 규칙보다 우선 순위를 높여야합니다.

input.text 
{ 
    border: 1px solid red ; 
} 

Answer 2

/* Set default border for `text` elements */ 
.text 
{ 
    border: 1px solid red; 
} 

/* Override for input elements */ 
input.text 
{ 
    border: 1px solid green; 
} 

Answer 3

스타일 순차적으로 적용뿐만 아니라 특이에게 규칙을 따라야합니다. .text은 input[type="text"]보다 구체적이지 않으므로 녹색 테두리가 "이깁니다." 빨간색 경계 규칙을보다 구체적으로 만들면 기대하는 결과를 얻을 수 있습니다.

input.text과 같은 것을 시도해보고 어떻게 될지 알아보십시오. 그렇게하지 않으면 더 구체적으로해야합니다.

Answer 4

선택자의 무게 문제입니다. 두 개의 총을 전달하는, 그래서

`input[type="text"] 

와

당신은, 선택으로 input 및 [type=text]을 모두 통과하고 있습니다.

.text 

와

당신은 하나의 통과된다. 이것은 체중이 적고 특이성이 낮기 때문에 첫 번째 선택자가 두 번째 선택기보다 유리합니다.

전에 (예 : input.text) input을 추가하면 두 번째 스타일에 더 많은 가중치가 추가됩니다.이 스타일은 캐스 케이 딩 스타일 시트에서 기대하는 것처럼 보입니다.

Specificity Calculator과 같은 웹 사이트를 통해 특이성을 쉽게 시각화 할 수 있습니다.