CSS에서 선택기의 가중치

CSS는 줄 사이 > 내부 > 외부, ID >class > 요소가 아닌 우선순위 계산 방법을 가지고 있다
1. 스타일 유형

줄 스타일

    CSS  。

인라인 스타일

외부 스타일

2. 선택기 유형
선택기
밤알
ID
#id
class
.class
라벨
p
등록 정보
[type='text']
괴뢰
:hover
위원소
::first-line
인접 선택기, 하위 선택기> +
3. 가중치 계산 규칙

인라인 스타일, 예: 스타일 = "...",권한은 1000입니다.

ID 선택기, 예를 들어 #콘텐츠, 권한0100.

류, 위류, 속성 선택기, 예.콘텐츠, 권한은 0010입니다.

유형 선택기, 위조 요소 선택기, 예를 들어divp의 경우 권한값은 0001이다.

어댑터, 하위 선택기, 인접 선택기 등.예를 들어* > +, 권한치는0000이다.

상속된 양식에 권한이 없음

4. 비교 규칙

1,0,0,0 > 0,99,99,99.즉, 왼쪽에서 오른쪽으로 등급을 비교해 보면 앞의 등급이 같아야 뒤떨어진다는 것이다.

행간, 내부와 외부 양식을 막론하고 모두 이 규칙에 따라 비교한다.직관적인 줄 > 내부 > 외부 스타일이 아니라ID>class> 요소.이런 착각은 행간이 1등인 것이 확실하기 때문에 그 권중이 가장 높다.내부 스타일은 일반적으로 외부 스타일 인용 다음에 쓰이기 때문에 이전의 것을 덮어쓸 수 있다.

가중치가 같은 경우 뒤의 스타일은 앞의 스타일을 덮어씁니다.

어댑터, 하위 선택기, 인접 선택기 등의.값이 0000이지만 상속된 스타일보다 우선하고 0 값이 무권치보다 우선합니다.

5. !important
!important의 역할은 우선순위를 높이는 것이다. 다시 말하면.이 문장을 추가한 양식의 우선순위가 가장 높다.

ie7+와 다른 브라우저는 important의 이런 작용에 대한 지지도가 매우 좋다.i6밖에 없어요. - 버그가 있어요.

p{
  color:red !important;
  color:blue;    
}        //   blue

그러나 이것은 i6가 important을 지원하지 않는다는 것을 설명하지 않는다. 단지 일부 버그만 지원할 뿐이다.

p{color:red !important;  }
p{color:blue;}        //         red。  ie6    important

!important 규칙이 스타일 선언에 적용되면 해당 스타일 선언은 선언 목록의 어느 위치에 있든 CSS의 다른 선언을 덮어씁니다.그럼에도 불구하고 !important 규칙은 우선순위와 아무런 관계가 없다.!important를 사용하는 것은 좋은 습관이 아니다. 왜냐하면 스타일시트의 원래 등급 연결 규칙을 바꾸어서 디버깅하기 어렵다.!important 사용 시 주의해야 할 사항:

Never는 사이트 전체의 css에서 절대 사용하지 마십시오!important

Only는 전체 사이트나 외부 css(예를 들어 인용된 ExtJs나 YUI)를 덮어쓰는 특정 페이지에서만 사용합니다!important

Never는 당신의 플러그인에서 영원히 사용하지 마세요!important

Always는 스타일 규칙을 사용하는 우선순위를 최적화하여 문제를 해결해야 한다!important

인터넷의 게시물은 대부분이 깊이가 같지 않고 심지어 앞뒤가 맞지 않는다. 아래의 글은 모두 학습 과정에서 정리한 것이다. 만약에 오류가 발견되면 댓글로 지적하는 것을 환영한다.
만약 당신도 지식 공유를 좋아한다면 우리에 가입하세요. QQ그룹 번호: 431679880~
참조:

CSS 선택기 가중치 계산 규칙

MDN 우선 순위는 어떻게 계산됩니까?

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

CSS에서 선택기의 가중치

CSS 。

좋은 웹페이지 즐겨찾기