CSS 선택기 우선 순위는 무엇입니까? CSS 기본 선택기 우선순위 소개

CSS에는 선택자의 종류가 많기 때문에 우선순위의 개념이 자연스럽게 나타나게 됩니다. 그렇다면 CSS 선택자의 우선순위는 무엇일까요? 이 기사에서는 CSS 선택기의 우선순위 순서를 소개합니다. 더 이상 고민하지 않고 바로 본문으로 이동하겠습니다.

CSS 선택기의 우선순위를 살펴보기에 앞서 기본 CSS 선택기란 무엇인가에 대해 간단히 알아보겠습니다.

1. 태그 선택기(예: body, div, p, ul, li)

2. ID 선택기(예: id="name", id="name_txt")

3. as: id="name", id="name_txt")

4. 하위 항목 선택기(예: #head .nav ul li 선택기에서 상위 세트로)

5 하위 요소 선택기(예: div> ;p, 초과 기호 포함>)

6. 의사 클래스 선택기(예: 링크 스타일, a 요소의 의사 클래스, 4가지 상태: 링크, 방문, 활성, 호버.)

See 기본 CSS 선택기 유형을 마친 후 css 우선순위의 개념을 살펴보겠습니다.

동일한 html 요소에 두 개의 규칙이 적용될 때 정의된 속성이 충돌하는 경우 어떤 값을 사용해야 하는지, 값이 사용되는 속성이 더 높은 우선순위를 갖습니다.

CSS 선택기 우선 순위 알고리즘을 살펴보겠습니다.

각 규칙은 초기 "4자리 숫자"인 0, 0, 0, 0에 해당합니다.
인라인 선택기인 경우 1, 0, 0 , 0
ID 선택자이면 0, 1, 0, 0을 추가
클래스 선택자/의사 클래스 선택자이면 각각 0, 0, 1, 0을 추가
요소 선택자이면 추가 0, 0 각각 , 0, 1
알고리즘: 각 규칙의 선택자에 해당하는 숫자를 더하여 얻은 "4자리 숫자"를 왼쪽에서 오른쪽으로 비교합니다. 숫자가 클수록 우선순위가 높습니다. ​

위 내용을 읽은 후 css 선택기 우선순위의 구체적인 순서를 살펴보겠습니다.

CSS 선택기 우선 순위는

1.id 선택기(#myid)

2. 클래스 선택기(.myclassname)

3 태그 선택기(div, h1, p)입니다.

4. 하위 선택자(ul < li)

5. 하위 선택자(li a)

6. 의사 클래스 선택(a:hover, li:nth-child)

마지막으로 주의할 점은 :

!important는 우선순위가 가장 높지만 충돌이 있는 경우 "4자리"를 비교해야 합니다.

우선순위가 동일한 경우 가장 가까운 원칙이 채택되고 마지막에 나타나는 스타일이 선택됩니다. 우선순위가 가장 낮은 상속된 속성입니다.

위 내용은 이 글의 전체 내용입니다. 물론 CSS 선택자에 대해서는 위의 6가지 선택자 외에도

css 사용자 매뉴얼

을 참조하세요.

위 내용은 CSS 선택기 우선 순위는 무엇입니까? CSS 기본 선택기 우선순위 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!