CSS 검색 일치 원리 이해를 더 간결 하 고 효율적인 CSS

CSS의 이렇게 많은 년, 지금만 실제 CSS 일치 원리 이해, 당신이 나 같은 경우는? 1 간단한 css 좀 봐:

Div #divbox p span.red{color:red,이 CSS, 브라우저 처음 보는 ID Divbox와 DIV 요소에 대 한 우리의 이해에 따라 그리고 때 발견, 발견, 그리고 모든 요소에 걸쳐 발견 아래의 모든 p 요소 기간 빨간 발견 된다, 스타일 적용 됩니다. 얼마나 간단 하 고 이해할 수 있는 원칙, 하지만이 이해는 완전히 반대로, 잘못.

일치 원리:

브라우저 CSS 일치 하지만 오른쪽에서 왼쪽, 왼쪽에서 오른쪽, 조회 되지 않습니다. 예를 들어 Div #divbox p span.red{color:red, 브라우저의 조회 순서는 다음과 같습니다.

모든 클래스에 대 한 최초 = '빨간색' html에서 요소에 걸쳐, 부모 요소, p 요소 인지 확인 한 다음 확인 P의 부모 요소에 ID divbox와 DIV 요소 인지 모두 존재 하는 다음 일치 하는 경우.

왼쪽 오른쪽에서 보고 하는 브라우저의 장점은 가능한 외부 스타일 규칙과 요소 일찍 밖으로 필터링입니다. HTML과 CSS 등:

다음은 참조 된 내용입니다.

< 스타일 >


Div #divbox P span.red{color:red


< 스타일 >


< 몸 >


< div id = "Divbox" >


< p >< 범위 > s1 < / 스팬 >< /p >


< p >< 범위 > s2 < / 스팬 >< /p >


< p >< 범위 > s3 < / 스팬 >< /p >


< p >< 클래스에 걸쳐 '레드' = > s4 < / 스팬 >< /p >


< / div >


< / 바디 >

왼쪽에서 오른쪽으로 검색 하는 경우 많은 무관 p 찾을 하 고 요소를 먼저 확장 합니다. 요소를 찾을 먼저 왼쪽에서 오른쪽으로 검색 하는 경우는 < 클래스에 걸쳐 '레드' = >. 키 선택기 (키워드 쿼리)에 대 한이 검색 메서드를 호출 하는 파이어 폭스, 소위 키워드는 스타일 규칙의 마지막 (가장 오른쪽) 규칙, 위의 키 span.red.

간단 하 고 효율적인 CSS:

소위 효율적인 CSS는 브라우저 스타일 일치 하는 검색 가능한 시간 요소, 우리의 일반적인 일부 아래에 나열 된 찾을 수 있도록 일부 비효율적인 오류 (또한 내가 사용 실수, 하지만 또한 글 효율적입니다 오래 된 생각)을 만들기 위해 CSS를 작성:

1, 로고 서명 하기 전에 ID 선택기를 사용 하지 마십시오

일반 문구: Div #divbox

더 나은 쓰기: #divBox

설명: ID 선택기 고유 하기 때문에, 불필요 한 일치 하는 Div를 추가 추가 됩니다.

2. 사용 하지 마십시오 클래스 선택기 전에 레이블 서명

일반 문구: span.red

더 나은 쓰기:. 레드

설명: 첫 번째, 동일 하지만 하나 이상 정의할 경우. 레드, 그리고 다른 요소에서 스타일 동일 하지 않습니다, 당신은 제거할 수 없습니다, CSS 같은 파일은 다음과 같이 정의 됩니다:

p.red{color:red;

Span.red{color: #ff00ff}

이 정의 제거 되지 않습니다, 경우 제거 후에, 혼동 될 것입니다 하지만 그것은 쓰기를 하지

3. 사용 가능한 조금 계층적 관계의

일반 문구: #divBox 피 레드 {색깔: 빨강;}

더 나은 쓰기:. 레드 {.}

4. 계층적 관계 대신 클래스 사용

일반 문구: #divBox ul Li A {디스플레이: 블록;

더 나은 쓰기:. 블록 {디스플레이: 블록;}