input [type = 'text'] CSS 선택기가 기본 유형 텍스트 입력에 적용되지 않습니까?
기본 입력 유형은 '텍스트'입니다. 나는 항상 CSS 선언 대상 input[type='text']
이 컨트롤에 명시 적으로 선언되지 않은 경우에도 해당 입력에 영향을 미칠 것이라고 가정했습니다 . 그러나 내 기본 유형 텍스트 입력이 스타일을 얻지 못한다는 것을 방금 알았습니다. 왜 그렇습니까? 이 문제를 어떻게 해결할 수 있습니까?
input[type='text'] {
background: red;
}
<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */
CSS는 DOM 트리의 데이터 만 사용하며, 이는 렌더러가 속성이 누락 된 요소로 수행 할 작업을 결정하는 방법과 거의 관련이 없습니다.
따라서 CSS가 HTML을 반영하도록하십시오.
input:not([type]), input[type="text"]
{
background:red;
}
또는 HTML을 명시 적으로 만드십시오.
<input name='t1' type='text'/> /* Is Not Red */
그렇게하지 않았다면 절대 구별 할 수 없었을 것입니다.
element { ...properties... }
과
element[attr] { ...properties... }
모든 속성은 항상 모든 요소에 정의되기 때문입니다. (예를 들어, table
항상 기본값 인 border
속성이 0
있습니다.)
CSS 사양에 따라 브라우저는 기본 속성에 대한 정보를 사용하거나 사용하지 않을 수 있습니다. 대부분은하지 않습니다. CSS 2.1 사양의 관련 절은 5.8.2 DTD의 기본 속성 값입니다 . CSS 3 Selectors에서는 같은 이름의 6.3.4 절 입니다. 권장 사항 : "문서 트리에 기본값이 포함되어 있는지 여부에 관계없이 작동하도록 선택기를 설계해야합니다."
일반적으로 필수 속성 type=text
을 기본값 으로 지정하는 대신 명시 적으로 지정하는 것이 가장 좋습니다 . 그 이유는 input
기본 type
속성이 있는 요소 를 참조하는 간단하고 신뢰할 수있는 방법이 없기 때문입니다.
왜냐하면 그것은 그렇게 해서는 안되기 때문입니다.
input[type=text] { }
속성 선택기이며 일치하는 속성이있는 해당 요소 만 선택합니다.
모든 브라우저를 준수하려면 항상 입력 유형을 선언해야합니다.
일부 브라우저는 기본 유형을 '텍스트'로 가정하지만 이는 좋은 방법이 아닙니다.
이 시도
input[type='text']
{
background:red !important;
}
'developer tip' 카테고리의 다른 글
C # SIP 스택 / 라이브러리 (0) | 2020.11.25 |
---|---|
__init__.py 파일에 파이썬 코드를 넣는 이유 (0) | 2020.11.25 |
IntellIJ에서 실행되는 테스트 제외 (0) | 2020.11.24 |
웹 서버를 시작할 수 없습니다. (0) | 2020.11.24 |
Javascript를 통해 쿠키를 HttpOnly로 설정 (0) | 2020.11.24 |