CSS 優先度計算の基礎となるルール-CSSチュートリアル-php.cn

CSS 優先度計算の基礎となるルール

php中世界最好的语言

リリース： 2018-03-21 16:53:24

オリジナル

1673 人が閲覧しました

今回は、CSS優先度計算の基本ルールと、CSS優先度計算の基本ルールの注意事項についてお届けします。実際のケースを見てみましょう。

最近、CSSの優先度計算のルールを勉強しています。ここには非常に多くの知識があり、非常に重要なので、今日はいくつかのメモを追加します。

CSSの重み

1. CSSの導入方法

1. ノード要素で、リンクを通じて外部ファイルを導入します

3.スタイルタグ Import

3 つのインポート方法の違い

index.html file

    <!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 file

    body {
        background: green;
    }

ログイン後にコピー

1. 最初の方法は後の 2 つの方法よりも優先され、順序とは関係ありません。はじめに、link タグと style タグが head 内、body 内、または

html タグ

の最後に配置されている場所に関係なく、ページは黄色で表示されます

2 番目と 3 番目のタイプは次のとおりです。横方向の導入、後で導入されるスタイルは以前に導入されたスタイルを上書きし、本文スタイルタグから削除されます

リンクタグとスタイルタグの順序を調整します。リンクが前、スタイルタグが後ろ、ページは逆に緑色で表示されます

2. ノードの取得方法

1.id

2.class

3. ラベル

4. 属性

id

ID 値はページ内で一意である必要がありますが、同一の ID が複数表示される場合、スタイルはすべての ID ノードで有効になります。 use: # ノード 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

标签

id、クラス、およびラベルがノード上でスタイル設定されている場合、1.id はクラスおよびラベルよりも高い重みを持ちます。同時に、ID の重みが最も高くなります

2. link タグと style タグを通じて同じ ID のスタイルを設定すると、後で導入されたスタイルが以前のスタイルを上書きします

class

クラスを使用して設定できる複数のノードで同時にスタイルを作成したり、クラスを重ねて使用したりできます。使い方は、ノードの単一クラス名が続きます

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

ログイン後にコピー

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

ログイン後にコピー

このとき、最初の段落は赤で表示され、2番目の段落は緑で表示されます

htmlを調整した後

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

ログイン後にコピー

class-pとの位置を調整した後、 class-p-2、ページプレゼンテーション効果は変わりません。注: クラススタイルのレンダリングは、クラスの使用順序とは関係がありません。同じ重みを持つクラススタイルの設定の順序に関係しており、スタイル設定では、後のスタイル設定が前のスタイルを上書きします。 settingsAttribute

ノードの属性を使用してスタイルを設定するノードを取得することもできます

.body {
  background: green !important;
}

ログイン後にコピー

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

ログイン後にコピー

2 番目の段落には title 属性があるため、2 番目の段落は赤色で表示されます

tag🎜🎜渡されたタグ名はスタイル設定用のノードを取得します🎜rrreeerrreee🎜ページ内のすべてのpタグノードは赤色でレンダリングされます🎜🎜🎜混合🎜🎜🎜上記の4つのメソッドは混合して、対応するスタイル設定に使用できますノード。組み合わせ方法には、階層ネスト、スタイルオーバーレイ、ノードの関連付けなどが含まれます。最終的には、最も重みが高いものが最終結果となります。 🎜🎜🎜3. スタイルの重み🎜🎜🎜上記の 4 つのメソッドでは、個人の ID が最も高く、クラスと属性は同じレベルであり (後のスタイルが前のスタイルを上書きします)、ラベルは最低。 🎜🎜 4 つの方法を組み合わせて使用する場合、重み付けされた結果が優先されます。同じノード上に存在する ID、クラス、属性、ラベルスタイルを並べ替えると、最初にランク付けされたものが最終的なレンダリング効果になります。例: ノード p には複数のタイプのスタイル設定があります。まず、ネストされたスタイルを含む、ID を持つすべてのスタイルを選択します。同じ ID の下で、別の種類のスタイルを並べ替えます🎜rrreeerrreee🎜両方のスタイル設定に ID があり、緑の効果は赤の後に設定されますが、並べ替えることで、同じ #id_p を取得できます。前のものが存在します。最後レンダリングエフェクトは赤です🎜

存在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中文网其它相关文章！

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS 優先度計算の基礎となるルール