스타일 시트의 CSS 스타일 재정의 순서 예시 공유

때때로 CSS를 작성하는 과정에서 다음과 같은 CSS 스타일 적용 문제와 관련된 특정 제한 사항이 항상 작동하지 않습니다. CSS의 순서는 "요소의 스타일" > "파일 헤더의 스타일 요소" > "외부 스타일 파일"이라고만 나와 있지만 스타일 파일에 있는 여러 개의 동일한 스타일의 우선순위가 어떻게 되는지에 대한 자세한 설명은 없습니다. 배열. 테스트하고 계속 검색한 결과 우선순위가 다음과 같이 정렬되어 있음을 알게 되었습니다.

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

ID로 지정된 스타일 selector> 클래스 선택 선택기에 의해 지정된 스타일 > 요소 유형 선택기에 의해 지정된 스타일

그래서 위의 예에서는 #navigator의 스타일 우선순위가 .current_block의 우선순위보다 높습니다. .current_block이 최신 추가 항목이더라도 작동하지 않습니다.

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

참고로 여기서는 스타일시트 파일에서 나중에 지정될수록 우선순위가 높습니다. 스타일 시트 파일. 요소 클래스가 나타나는 순서입니다. 예를 들어 스타일 시트에서 .class2는 .class1 뒤에 나타납니다.

Css 코드

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

.current_block {  
    border: solid 2 #AE0;  
}

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

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

Css 코드

.class1 {  
    color: black;  
}  

.class2 {  
    color: red;  
}

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

처음에 직면하는 문제에 대한 두 가지 해결책이 있습니다:

1. 将border从#navigator中拿出来，放到一个class .block中，而.block放到.current_block之前：

Css代码  

#navigator {  
    height: 100%;  
    width: 200;  
    position: absolute;  
    left: 0;  
}  

.block {  
    border: solid 2 #EEE;  
}  

.current_block {  
    border: solid 2 #AE0;  
}

 需要莫仁为#navigator元素指定class="block"

 

2. 使用!important:

 Css代码  

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

.current_block {  
    border: solid 2 #AE0 !important;  
}

위 내용은 스타일 시트의 CSS 스타일 재정의 순서 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!