CSS 재정의 규칙 및 특이성
저는 종종 CSS 재정의 규칙에 혼란스러워합니다. 일반적으로 좀 더 구체적인 스타일 시트가 덜 구체적인 스타일 시트를 재정의하고 그 특이성은 지정된 선택자 수에 따라 결정된다는 것을 알고 있습니다. !important역할을 하는 키워드 도 있습니다.
여기에 간단한 예가 있습니다. 두 개의 테이블 셀이있는 테이블이 있습니다. 테이블 자체에는 테이블 내의 모든 셀에 적용되는 CSS 규칙이 있습니다. 그러나 두 번째 테이블 셀에는 일반 테이블 규칙을 재정의해야하는 자체 규칙이 있습니다.
<html>
<head>
<style type = "text/css">
table.rule1 tr td {
background-color: #ff0000;
}
td.rule2 {
background-color: #ffff00;
}
</style>
</head>
<body>
<table class = "rule1">
<tr>
<td>abc</td>
</tr>
<tr>
<td class = "rule2">abc</td>
</tr>
</table>
</body>
</html>
나는 브라우저에서 열면하지만 ..., 그보고 rule2무시하지 않습니다 rule1. 좋아-그래서 rule2좀 더 "구체적으로" 만들어야한다고 생각 하지만, 특정 테이블 셀에 적용하고 싶기 때문에 더 이상 선택자를 정의 할 수 없습니다. 그래서 ! important키워드를 넣어 보았지만 작동하지 않습니다.
rule2텍스트 노드를 다음 <div>과 같이 래핑하면 재정의 할 수 있습니다 .
<td class = "rule2"><div>abc</div></td>
... 그리고 CSS 규칙을 더 구체적으로 만드십시오.
td.rule2 div {
background-color: #ffff00; !important
}
이것은 작동하지만 정확히 내가 원하는 것은 아닙니다. 우선 규칙을 DIV가 아닌 테이블 셀 에 적용하고 싶습니다 . rule1div 주변의 테두리로의 배경색을 여전히 볼 수 있기 때문에 차이가 있습니다 .
그렇다면 CSS 에 요소 rule2를 무시 하고 싶다고 알리려면 어떻게해야 합니까?rule1td
두 번째 규칙에 더 높은 특이성을 부여하려면 항상 첫 번째 규칙의 일부를 사용할 수 있습니다. 이 경우 table.rule1 tr규칙 1에서 추가하고 규칙 2에 추가합니다.
table.rule1 tr td {
background-color: #ff0000;
}
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
잠시 후 나는 이것이 자연스러워지는 것을 알지만 어떤 사람들은 동의하지 않는다는 것을 압니다. 그런 사람들에게는 LESS 또는 SASS를 살펴 보는 것이 좋습니다 .
특이성은 규칙의 ID, 클래스 및 태그 선택기의 양을 기반으로 계산됩니다. Id는 가장 높은 특이성을 가지고 있으며, 클래스, 태그 순입니다. 두 번째 규칙에는 모두 클래스 선택기가 있지만 첫 번째 규칙에는 두 개의 태그 선택기가 있으므로 이제 첫 번째 규칙이 두 번째 규칙보다 더 구체적입니다.
To make the second one override the first one, you can make more specific by adding information of it's parents:
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
Here is a nice article for more information on selector precedence.
The important needs to be inside the ;
td.rule2 div { background-color: #ffff00 !important; }
in fact i believe this should override it
td.rule2 { background-color: #ffff00 !important; }
ReferenceURL : https://stackoverflow.com/questions/11263488/css-override-rules-and-specificity
'IT story' 카테고리의 다른 글
| Android OpenGL 텍스처 압축 (0) | 2021.01.07 |
|---|---|
| SAPI 란 무엇이며 언제 사용합니까? (0) | 2021.01.07 |
| Windows에 npm (Node.js 패키지 관리자) 설치 (Node.js MSI를 사용하지 않음) (0) | 2021.01.07 |
| Mac OS X 10.9-영구 환경 변수 설정 (0) | 2021.01.07 |
| 일반 Java 메소드의 일반 유형을 사용하여 인수 유형을 적용 할 수 있습니까? (0) | 2021.01.07 |