CSS 선택 기 우선 순위 요약
9974 단어 배 움 의 길
박문 전재 가 필요 하 시 면 원문 링크 블 로그 주 소 를 추가 하 십시오.http://www.cnblogs.com/zxjwlh
계승: 즉, 하위 요소 가 부모 류 의 스타일 을 계승 하 는 것 입 니 다.
우선 순위: 서로 다른 유형의 스타일 의 가중치 비 교 를 말 합 니 다.
레이 어드: 수량 이 같 을 때 레이 어드 (후 자 는 전 자 를 덮는다) 를 통 해 하 는 스타일 입 니 다.
css 선택 문자 분류
먼저 css 선택 기 (css 선택 기) 에는 어떤 것들 이 있 나 요?
1. 태그 선택 기 (예: body, div, p, ul, li) 2. 클래스 선택 기 (예: class = "head", class = "head logo") 3. ID 선택 기 (예: id = "name", id = "name txt") 4. 전역 선택 기 (예: * 번) 5. 조합 선택 기 (예:. head. head logo, 두 선택 기 를 빈 칸 으로 나 누 는 것 을 주의 하 세 요) 6. 후대 선택 기(예 를 들 어 \ # head. nav ul li 는 부모 집합 에서 자손 집합 까지 의 선택 기) 7. 그룹 선택 기 div, span, img {color: Red} 은 같은 스타일 의 태그 그룹 으로 나 누 어 표시 합 니 다. 계승 선택 기 (예 를 들 어 div p, 두 선택 기 는 빈 칸 으로 나 누 는 것 을 주의 하 십시오) 9. 의사 선택 기 (예 를 들 어 링크 스타일, a 요소 의 의사 클래스, 4 가지 다른 상태: link, visited, active, hover)10. 문자열 이 일치 하 는 속성 선택 자 (^ $* 세 가지, 각각 시작, 끝, 포함) 11. 하위 선택 기 (예: div > p, 번호 이상) 12. CSS 인접 형제 선택 기 (예: h1 + p, 플러스 +)
css 우선 순위
두 규칙 이 같은 html 요소 에 작용 할 때 정 의 된 속성 이 충돌 하면 누구의 값 을 사용 해 야 하 는 지, CSS 는 우선 순위 의 정 의 를 가지 고 있 습 니 다.
다른 등급
속성 뒤에 사용 합 니 다! important 는 페이지 의 모든 위치 에서 정 의 된 요소 스타일 을 덮어 씁 니 다. style 속성 으로 요소 에 적 힌 스타일 id 선택 기 클래스 선택 기 탭 선택 기 어댑터 선택 기 브 라 우 저 사용자 정의 또는 계승 요약 정렬:! important > 줄 내 스타일 > ID 선택 기 > 클래스 선택 기 > 탭 > 어댑터 > 계승 > 브 라 우 저 기본 속성
동급
같은 단계 에서 나중에 쓴 것 은 먼저 쓴 스타일 을 덮어 씁 니 다.
위의 등급 은 쉽게 알 아 볼 수 있 지만 어떤 규칙 은 여러 등급 의 조합 이다. 이렇게
doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
div.test{
background-COLOR:#a00;
width:100px;
height: 100px;
}
.test.test2{
background-COLOR:#0e0;
width:100px;
height: 100px;
}
style>
head>
<body>
<div class="test test2">div>
body>
html>도대체 div 는 그 규칙 을 응용 하 는 것 입 니까? 간단 한 계산 방법 이 있 습 니 다.
내 연 스타일 시트 의 가중치 는 1000 이다.
ID 선택 기의 가중치 가 100 입 니 다.
Class 클래스 선택 기의 가중치 는 10 입 니 다.
HTML 태그 선택 기의 가중치 1 우 리 는 선택 기 에서 규칙 을 덧셈, 비교 가중치 로 대응 할 수 있 습 니 다. 가중치 가 같 으 면 뒤의 것 이 앞 을 덮 습 니 다. div. class 의 가중치 는 1 + 10 = 11 이 고, test 1. test 2 의 가중치 는 10 + 10 = 20 이기 때문에 div 는. test 1. test 2 를 녹색 으로 바 꿀 것 입 니 다.
또 다른 이해 방식:
CSS 우선 순위: 네 개의 단계 와 각 단계 의 출현 횟수 에 따라 결 정 됩 니 다. 네 개의 단 계 는 줄 내 선택 문자, ID 선택 문자, 분류 선택 문자, 요소 선택 문자 입 니 다. 우선 순위 의 알고리즘: 각 규칙 은 하나의 초기 '네 자리 수' 에 대응 합 니 다.: 0, 0, 0, 0 줄 내 선택 부적 이면 1, 0, 0, 0 ID 선택 부적 을 추가 하고 0, 1, 0, 0 클래스 선택 부적 / 속성 선택 부적 / 의사 선택 부적 을 추가 하면 각각 0, 0, 1, 0 요소 선택 부적 / 의사 요소 선택 부적 을 추가 하면 각각 0, 0, 0, 1 알고리즘 을 추가 합 니 다. 각 규칙 에서 선택 부적 에 대응 하 는 수 를 추가 하여 얻 을 수 있 습 니 다.의 '네 자리 수' 를 왼쪽 에서 오른쪽으로 비교 하면 큰 우선 순위 가 높다.
주의해 야 할 것:
①! important 의 우선 순 위 는 가장 높 지만 충돌 이 발생 할 때 는 '네 자리 수' 를 비교 해 야 한다."② 、 우선 순위 가 같 으 면 가 까 운 원칙 으로 마지막 에 나타 나 는 스타일 을 선택 합 니 다. ③ 、 계승 할 수 있 는 속성 은 우선 순위 가 가장 낮 습 니 다.! important > 줄 내 스타일 > ID 선택 기 > 클래스 선택 기 > 태그 > 어댑터 > 계승 > 브 라 우 저 기본 속성 * css 선택 기 는 강력 한 제안 으로 저 가중치 원칙 을 사용 하여 css 의 계 를 충분히 발휘 하 는 데 유리 합 니 다."승 성, 복용 성, 모듈 화, 모듈 화.
선택 기의 포 지 셔 닝 원칙
예전 에 선택 한 포 지 셔 닝 이 왼쪽 에서 오른쪽으로 향 하 는 것 이 라 고 생각 했 습 니 다. 인터넷 의 관련 자 료 를 살 펴 본 후에 야 자신 이 항상 틀 렸 다 는 것 을 알 게 되 었 습 니 다. 선택 기의 포 지 셔 닝 은 오른쪽 에서 왼쪽으로 향 하 는 것 이 라 고 정 중 히 밝 혔 습 니 다. 이러한 장점 은 가능 한 한 빨리 무관 한 스타일 규칙 과 요 소 를 걸 러 내 는 것 입 니 다.
간결 하고 효율 적 인 css
효율 이란 브 라 우 저 로 하여 금 더 적은 요소 라벨 을 찾 아 일치 하 는 style 요 소 를 확인 하 게 하 는 것 이다.
1. ID 선택 기 앞에서 탭 이름 을 사용 하지 마 십시오.
설명: ID 선택 이 유일한 것 입 니 다. 서명 을 표시 하 는 것 은 사족 을 그 리 는 것 과 같 습 니 다. 필요 없습니다.
2. 클래스 선택 기 앞에서 탭 이름 을 사용 하지 마 십시오.
설명: 같은 이름 이 나 오지 않 으 면 필요 없 지만 같은 이름 의 클래스 선택 기 가 여러 개 존재 한다 면 헷 갈 리 지 않도록 태그 이름 을 추가 할 필요 가 있 습 니 다 (p. colclass {color: red;} 와 span. colclass {color: red;}
3. 등급 관 계 를 최대한 적 게 사용한다.
#divclass p. colclass {color: red;} 으로 변경 .colclass{color:red;}
4. 등급 관계 대신 클래스 선택 기 사용 (위 와 같이)
또한 참고 할 수 있 습 니 다: http://www.cnblogs.com/dq-Leung/p/4213375.html
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
CSS 선택 기 우선 순위 요약두 규칙 이 같은 html 요소 에 작용 할 때 정 의 된 속성 이 충돌 하면 누구의 값 을 사용 해 야 하 는 지, CSS 는 우선 순위 의 정 의 를 가지 고 있 습 니 다. 각 규칙 에서 선택 부적 에 대응 하...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
