CSS 스타일시트의 스타일 우선순위

때때로 CSS를 작성하는 과정에서 다음과 같이 CSS 스타일 적용 문제와 관련된 특정 제한 사항이 항상 작동하지 않는 경우가 있습니다.

rree

일부 교과서(w3schools 등)를 보고 The라고 말하세요. CSS의 순서는 "요소의 스타일" > "파일 헤더의 스타일 요소" > "외부 스타일 파일"이지만 스타일 파일에서 동일한 여러 스타일의 우선 순위가 어떻게 정렬되는지에 대한 자세한 설명은 없습니다. 테스트하고 계속 검색한 결과 다음과 같이 우선순위가 정렬되어 있음을 알게 되었습니다.

1. 스타일 시트의 요소 선택기가 정확할수록 스타일의 우선순위가 높아집니다. :

ID 선택기로 지정된 스타일> 클래스 선택기로 지정된 스타일

따라서 위의 예에서는 #navigator의 스타일 우선순위가 의 우선순위보다 높습니다. current_block, 시간에 따라 .current_block이 최신 추가 항목이며 작동하지 않습니다.

2. 동일한 유형의 선택기로 지정된 스타일의 경우 스타일시트 파일이 나중에 지정될수록 우선순위가 높습니다.

참고로 스타일시트 파일은 다음과 같습니다. 요소의 뒷부분에 있을수록 요소 클래스가 나타나는 순서가 아닌 우선순위가 높아집니다. 예를 들어 스타일 시트에서 .class2는 .class1 뒤에 나타납니다.

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

요소에서 클래스를 지정하는 경우 class="class2 class1"을 사용하여 지정합니다. 이때 요소에는 class1이 지정되어 있지만, class2 뒤의 순위이지만 스타일시트 파일에서는 class1이 class2보다 앞에 있으므로 현재로서는 class2의 우선순위가 더 높으며 색상 속성은 검정색이 아닌 빨간색입니다.

.class1 {
    color: black;
}
.class2 {
    color: red;
}

3. 특정 스타일의 우선순위를 더 높이려면 !important를 사용하여 다음과 같이 지정할 수 있습니다.

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

이때 수업에서는 빨간색 대신 검정색을 사용합니다.

처음에 발생한 문제에 대해 두 가지 해결책이 있습니다:

1. #navigator에서 테두리를 꺼내서 .block 클래스에 넣습니다. .block은 .current_block 앞에 배치됩니다:

.class1 {
    color: black !important;
}
.class2 {
    color: red;
}

class="block"을 지정해야 합니다

2. 중요:

#navigator {
    height: 100%;
    width: 200;
    position: absolute;
    left: 0;
}
.block {
    border: solid 2 #EEE;
}
.current_block {
    border: solid 2 #AE0;
}

를 사용하세요. CSS 스타일시트의 스타일 우선순위에 관한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!