집 > 기사 > 웹 프론트엔드 > CSS 우선순위 계산의 기본 규칙

CSS 우선순위 계산의 기본 규칙

php中世界最好的语言원래의: 2018-03-21 16:53:241609검색

이번에는 CSS 우선순위 계산의 기본 규칙과 CSS 우선순위 계산의 기본 규칙 Notes에 대해 알아보겠습니다.

최근 CSS 우선순위 계산 규칙을 배우고 있습니다. 여기에는 꽤 많은 지식 포인트가 있고 매우 중요하므로 오늘은 몇 가지 참고 사항을 추가하겠습니다.

CSS의 무게

1. CSS 소개 방법

1. node 요소에서 style 속성을 사용합니다. 2. 링크를 통해 외부 파일 소개

3. 스타일 태그 가져오기

세 가지 가져오기 방법의 차이점

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. 첫 번째 방법이 후자보다 우선순위가 높으며 순서와는 아무런 관련이 없습니다. 소개에서 링크와 스타일 태그가 머리 속, 본문 안,

html 태그

끝에 배치되면 페이지가 노란색으로 표시됩니다

2. 가로 소개, 나중에 소개되는 스타일은 이전에 소개된 스타일을 덮고 본문 스타일 태그에서 제거됩니다.

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

2. 노드를 얻는 방법

1.id

2.class

3. 라벨

4. 속성

id

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

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

#id_p {
  color: red;
}

id

在一个页面中id值应该是唯一，但是，当出现多个相同id时，样式对所有id节点是有效的，使用方式：#后面跟节点id值

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

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

结果显示，两个段落中的文字都呈现red

1.id相对class和标签具有更高的权重，当id和class、标签同时对一个节点设置样式时，id的权重为最高

2.通过link和style标签对同一个id设置样式时，后引入的样式覆盖之前的样式

class

使用class可以对多个节点同时设置样式，并且可以叠加class使用。使用方式.后面跟节点单个class名

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

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

此时，第一个段落呈现red，第二个段落呈现green

调整html

[title] {
  color: red;
}

调整class-p和class-p-2的位置后，页面呈现效果不变。说明：class样式的渲染和class的使用顺序无关，与class样式设置的先后顺序有关，同权重的class样式，在样式设置中，靠后的样式设置覆盖之前的样式设置

属性

通过节点上的属性也可以得到要进行样式设置的节点

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

p {
  color: red;
}

第二个段落有title属性，所以第二个段落呈现red

标签 결과는 두 단락의 텍스트가 빨간색임을 보여줍니다.

1. ID는 클래스 및 레이블보다 가중치가 더 높습니다. 동시에 id의 가중치가 가장 높습니다

2. 링크 및 스타일 태그를 통해 동일한 ID에 대한 스타일을 설정하면 나중에 소개되는 스타일이 이전 스타일을 덮어씁니다

classclass를 사용하여 설정할 수 있습니다. 동시에 여러 노드에 스타일을 적용하고 클래스를 겹쳐서 사용할 수 있습니다. 사용 방법 노드의 단일 클래스 이름이 이어집니다

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

.body #id_p {
  color: red;
}
#id_p {
  color: green
}

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

html을 조정한 후

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

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

속성

노드의 속성을 통해 노드 스타일을 지정할 수도 있습니다

.body {
  background: green !important;
}

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

두 번째 문단에는 제목 속성이 있으므로 두 번째 문단은 빨간색으로 표시됩니다

🎜 태그🎜🎜전달된 태그 이름은 스타일 설정을 위한 노드를 가져옵니다🎜rrreeerrreee🎜페이지의 모든 p 태그 노드는 빨간색으로 렌더링됩니다🎜🎜🎜Mixed🎜🎜🎜위의 네 가지 방법을 혼합하여 해당 스타일을 지정하는 데 사용할 수 있습니다. 노드. 조합 방법에는 계층적 중첩, 스타일 오버레이, 노드 연관 등이 포함됩니다. 결국 가중치가 가장 높은 사람이 최종 결과가 됩니다. 🎜🎜🎜3. 스타일 가중치🎜🎜🎜위 네 가지 방법의 경우 개인의 경우 ID가 가장 높고 클래스와 속성은 동일한 수준(나중 스타일이 이전 스타일을 덮어씀)이며 레이블은 가장 낮습니다. 🎜🎜네 가지 방법을 조합하여 사용할 경우 가중치를 적용한 결과가 우선합니다. 동일한 노드에 존재하는 ID, 클래스, 속성 및 레이블 스타일을 정렬하여 가장 먼저 순위가 매겨진 것이 최종 렌더링 효과가 됩니다. 예: 노드 p에 대한 스타일 설정에는 여러 유형이 있습니다. 먼저 중첩 스타일을 포함하여 ID가 있는 모든 스타일을 선택합니다. 같은 ID 아래에 다른 유형의 스타일을 정렬🎜rrreeerrreee🎜두 스타일 설정 모두 ID가 있고 녹색 효과가 빨간색 이후에 설정되어 있지만 동일한 #id_p 아래에는 이전 항목이 존재합니다.body이므로 결국 렌더링 효과 빨간색🎜

存在class、属性和标签的样式时，依次排序，同类型或同权重（class和属性同权重）的样式，靠后的样式覆盖之前的样式（以类型为准，不以名称为准），最终排位第一者为最终呈现效果。

注意：

1.嵌套、叠加、>、 +等方式，不会影响最终效果。

2.:nth-child、:first-child、:last-child等伪类高于class和属性

四、!important

!important为样式中的特例，它的权重为最高，高于id、class、属性、标签以及style属性

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

.body {
  background: green !important;
}

页面呈现效果为green。但是当对样式设置进行排序时，仍然是同类型样式下，以另一类型权重高者为最终效果。例如

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

相同class及!important下，前一种样式设置存在body标签，后一种则没有，所以最终效果呈现blue

说明

1.尽量避免使用!important。因为!important权重最高，会对节点的该属性做强制性设置，在使用时要慎重

2.使用场景

引入插件时，对插件中的样式进行强覆盖。当引入插件时，在不想修改插件中的样式代码情况下，可通过!important对插件内的样式属性进行强制复写
对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时，可以通过!important对行内样式进行强制复写

1.变通

!important在很多时候是不建议使用的，在stylelint中有一项规则即禁止使用!important。有一种变通的方式，可以在多数情况下实现类似!important`的效果

html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>

css .body .p .span { color: red; } .span.span.span.span.span {/** 自身样式叠加 **/ color: green; }

在不考虑行内样式和id的情况下，对自身样式进行重复叠加多次使用，可以增加class权重，对样式进行复写。

使用前提：

1.没有行内样式style属性

2.没有id样式

3.自身样式叠加次数多余嵌套个数

好处：不用考虑DOM层级关系，减少层级嵌套

五、总结

综合以上说明，权重的计算基本遵从以下规则：

1.按类型比对，类型权重高者显示；

2.同类型，按数量比对，多者显示；

3.同数量，按先后顺序比对，后者显示

嵌套的使用建议

样式嵌套使用，除了增加权重外，也体现了DOM的某种结构关系。但嵌套并不是在任何情况下都需要的。

嵌套多用于块内独有的样式设置。某种样式仅在某个块内有效，可使用嵌套。
多个页面同时开发时，为避免合并后样式被覆盖，可使用嵌套。

嵌套的使用并不是越多越好。嵌套越多，权重越大，但同时对页面的性能消耗也越大。建议使用继承和样式叠加。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

CSS 우선순위 계산의 기본 규칙

관련 기사