CSS 우선순위 계산 규칙에 대한 자세한 설명-CSS 튜토리얼-php.cn

최근 CSS 우선순위 계산 규칙을 공부했는데, 여기에 지식 포인트가 많이 있는데, 이 글에서는 주로 CSS 우선순위 계산 규칙을 소개하는 것 같습니다. 여러분과 공유하고 모두가 참고할 수 있도록 만들어 보세요. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

CSS의 무게

1. CSS 도입 방법

1. node 요소에 style 속성을 사용합니다.

2. 스타일 태그를 통해 페이지에 도입합니다. 세 가지 소개 방법의 차이점

index.html 파일

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

로그인 후 복사

body.css 파일

    body {
        background: green;
    }

로그인 후 복사

1. 첫 번째 방법이 후자보다 우선순위가 높으며 소개 순서와는 관계가 없습니다. 링크 및 스타일 태그가 head에 있거나 본문 내에 있거나 html 태그의 끝에 위치하더라도 페이지는 노란색으로 표시됩니다

2. 두 번째와 세 번째 유형은 가로 소개이며, 스타일이 소개됩니다. 나중에 이전에 소개된 스타일을 덮어쓰세요. 본문의 스타일 태그를 제거하세요.

링크와 스타일 태그의 순서를 조정하세요. 링크가 앞에 있고 스타일 태그가 뒤에 있습니다. 반대로 페이지는 녹색으로 표시됩니다.

1.id

2.class

3. 라벨

4. 속성

id 값은 페이지 내에서 고유해야 하지만, 동일한 ID가 여러 개 나타날 경우 스타일은 모든 id 노드에 유효합니다. value

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>

로그인 후 복사

#id_p {
  color: red;
}

로그인 후 복사

결과는 두 문단에서 텍스트가 빨간색으로 나타나는 것을 보여줍니다.

1. ID는 클래스와 레이블보다 더 높은 가중치를 갖습니다. 노드에 동시에 스타일이 지정되면 id의 가중치가 높아집니다.

2. 링크와 스타일 태그를 사용하여 동일한 노드에 스타일을 지정하면 나중에 소개되는 스타일이 이전 스타일을 덮어씁니다.

class

클래스를 사용하면 여러 노드에 동시에 스타일을 설정할 수 있습니다. , 클래스를 중첩할 수 있습니다. 사용 방법 노드의 단일 클래스 이름이 이어집니다

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>

로그인 후 복사

.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

로그인 후 복사

이때 첫 번째 문단은 빨간색으로 나타나고 두 번째 문단은 녹색으로 나타납니다

html을 조정한 후

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序  -->
</body>

로그인 후 복사

class-p의 위치를 조정한 후 class-p-2, 페이지 프리젠테이션 효과는 그대로 유지됩니다. 참고: 클래스 스타일 렌더링은 클래스 사용 순서와 관련이 없지만 클래스 스타일 설정 순서와 관련이 있습니다. 동일한 가중치를 갖는 클래스 스타일의 경우 스타일 설정에서 이후 스타일 설정이 이전 스타일을 덮어씁니다. settings

Attributes

노드를 통해 on 속성은 노드에 스타일을 적용할 수도 있습니다

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>

로그인 후 복사

[title] {
  color: red;
}

로그인 후 복사

두 번째 문단에는 title 속성이 있으므로 두 번째 문단에는 빨간색

라벨

스타일 설정을 위한 노드를 가져옵니다. 라벨 이름

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>

로그인 후 복사

p {
  color: red;
}

로그인 후 복사

페이지의 모든 p 라벨 노드가 빨간색으로 나타남

Mixed

위의 네 가지 방법을 혼합하여 해당 노드의 스타일을 지정할 수 있습니다. 조합 방법에는 계층적 중첩, 스타일 오버레이, 노드 연관 등이 포함됩니다. 결국 가중치가 가장 높은 사람이 최종 결과가 됩니다.

3. 스타일 가중치

위 네 가지 방법의 경우 개인의 경우 ID가 가장 높고 클래스와 속성은 동일한 수준(이후 스타일이 이전 스타일을 덮어씀)이며 레이블이 가장 낮습니다.

네 가지 방법을 조합하여 사용할 경우 가중치를 적용한 결과가 우선합니다. 동일한 노드에 존재하는 ID, 클래스, 속성 및 레이블 스타일을 정렬하여 가장 먼저 순위가 매겨진 것이 최종 렌더링 효과가 됩니다. 예: 노드 p에 대한 스타일 설정에는 여러 유형이 있습니다. 먼저 중첩 스타일을 포함하여 ID가 있는 모든 스타일을 선택합니다. 동일한 ID에서 다른 유형의 스타일을 정렬합니다

<body class="body">
  <p id="id_p">第一个段落</p>
</body>

로그인 후 복사

.body #id_p {
  color: red;
}

#id_p {
  color: green
}

로그인 후 복사

두 스타일 설정 모두 ID가 있고 녹색 효과는 빨간색 이후에 설정되지만 정렬을 통해 동일한 #id_p를 얻을 수 있으며 이전 스타일이 존재합니다.body , 그래서 최종 렌더링 효과는 빨간색입니다

클래스, 속성, 라벨의 스타일이 있는 경우 동일한 유형 또는 가중치의 스타일(클래스와 속성의 가중치가 동일함) 순서대로 정렬되며 이후 스타일이 이전 스타일을 덮어씁니다. (종류에 따라 다름), 이름 기준이 아님), 1순위가 최종 결과가 됩니다.

참고:

1. 중첩, 오버레이, >, + 등은 최종 효과에 영향을 미치지 않습니다.

2. :nth-child, :first-child, :last-child 및 기타 의사 클래스는 클래스 및 속성보다 높습니다.

4 !important

!중요한 것은 스타일의 특별한 경우입니다. 최고, 이상 id, class, attribute, label 및 style 속성

<body class="body" style="background: red"></body>

로그인 후 복사

.body {
  background: green !important;
}

로그인 후 복사

페이지 렌더링 효과는 녹색입니다. 그러나 스타일 설정을 정렬하면 동일한 스타일 유형에서 다른 유형의 가중치가 더 높은 것이 최종 효과가 됩니다. 예를 들어

body.body {
  background: blue !important;
}
.body {
  background: green !important;
}

로그인 후 복사

동일한 클래스와 !important를 사용하면 전자 스타일 설정에는 body 태그가 있지만 후자에는 없어 최종 효과가 파란색으로 나타납니다.

설명

1. !important는 가중치가 가장 높기 때문에 노드의 이 속성을 강제로 설정하므로 사용 시 주의하세요

2. 사용 시나리오

플러그인을 도입할 때 플러그인의 스타일을 강력하게 재정의하세요. . 플러그인을 도입할 때 플러그인의 스타일 코드를 수정하지 않으려면 !important를 사용하여 플러그인

!important는 대부분의 경우 사용을 권장하지 않습니다. stylelint에는 !important 사용을 금지하는 규칙이 있습니다. 대부분의 경우 !important`와 유사한 효과를 얻을 수 있는 해결 방법이 있습니다

html 텍스트

css .body .p .span { color: red } .span.span.span.span.span {/**셀프 스타일 오버레이 * */ color: green; }

인라인 스타일과 ID를 고려하지 않고 자신만의 스타일을 반복적으로 오버레이하고 여러 번 사용하여 클래스 가중치를 높이고 스타일을 재정의할 수 있습니다.

사용 전제 조건:

1. 인라인 스타일 스타일 속성 없음

2. ID 스타일 없음

3. 자체 스타일의 오버레이 수가 중첩 수를 초과합니다.

이점: DOM 계층을 고려할 필요가 없습니다. 관계, 계층적 중첩 감소

5. 요약

위의 설명을 기반으로 가중치 계산은 기본적으로 다음 규칙을 따릅니다.

1 유형별로 비교하면 유형 가중치가 더 높은 항목이 표시됩니다. .동일한 종류의 경우 수량별로 비교하면 가중치가 높은 것이 표시됩니다.

3. 동일한 수량을 순서대로 비교하면 후자의

네스팅 사용 제안

추가로 스타일 네스팅 사용이 표시됩니다. 무게를 늘리는 것은 DOM의 특정 구조적 관계를 반영합니다. 그러나 모든 경우에 중첩이 필요한 것은 아닙니다.