ホームページ > 記事 > ウェブフロントエンド > CSS の仕組み (スタイルが繰り返されるタグの場合、ブラウザはどのスタイルを選択するか)_html/css_WEB-ITnose

CSS の仕組み (スタイルが繰り返されるタグの場合、ブラウザはどのスタイルを選択するか)_html/css_WEB-ITnose

WBOYオリジナル: 2016-06-24 11:57:451128ブラウズ

たとえば、タグ P には、埋め込みスタイルシートと外部スタイルシートで複数回設定された関連する属性値 (color: red;/color: blue など) が含まれる場合があります。では、ブラウザはどの値を使用するのでしょうか。 Pのスタイルを表示しますか？ ? ?これが CSS の仕組みです。 (中でも、特異性がより重要です)

CSS には 3 つの動作メカニズムがあります: 1. 継承 2. カスケード 3. 仕様 (カスケードの原則は継承と特異性に基づいています)

1. 継承: cssの要素は、その子孫に 1 つのこと、つまり CSS プロパティの値を渡します。 body はすべての要素の祖先です。 body{color:red;} を指定すると、ドキュメント内のすべての要素がこのスタイルを継承します。これが、メモ帳プログラムでテキスト行を作成した後、その名前を xxx.html に変更する理由です。各ブラウザには独自の事前定義されたスタイルテーブルがあるため、別のブラウザで開くと異なるフォント効果が表示されます。本文には font 属性が含まれており、ブラウザで HTML を開くと、この属性が継承されます。

もちろん、すべての属性を継承できるわけではありません。継承できる属性のほとんどは、色、フォント、フォントサイズなど、テキストに関連しています。一部の属性は、要素の位置、マージン、パディング、境界線、その他の属性に関係するものなど、継承しても意味がないか、継承するとページのレイアウトに影響します。

2. カスケード: これは CSS の C (カスケード) で、主にスタイルのソースと詳細に従ってカスケードします。

a) スタイルソース: 以下は、ブラウザが各ソースからスタイルをカスケードする順序です:

ブラウザのデフォルトスタイルシート
ユーザースタイルシート (たとえば、視覚障害のあるユーザーの場合は、本文を追加します{ font-size :200%})
開発者用外部スタイルシート (ページに導入される順序)
開発者埋め込みスタイルシート
開発者インラインスタイルシート
注: 3 と 4 の順序は次のとおりです。 c9ccee2e6ea535a969eb3f532ad9fe89 埋め込まれた style タグの位置と 2cdf5bf648cf2f33323966d7f58a7f3f タグの位置、後のタグが選択されます。例 2 を参照してください

優先度が高いほど、ブラウザは後のソース設定を優先します

b) 特異性: セレクターのスコアリングルールであり、スコアの高いセレクターが選択されます。式には計算する必要がある 3 つの値があります: I-C-E。ルールは次のとおりです

セレクターは英語ではセレクターとも呼ばれます。CSS にはさまざまな種類がありますので、ここでは詳しく説明しません。

特異度の例を示します:

p0-0-1 specificity=1p.classp10-1-1 特異度は 11p#idp11-0-1 特定次数は 101body p#idp11-0-2 特定次数は 102body p#idp1 ul.classul1 1-1- の特定次数3は113ですbody p#idp1 ul.classul1 li1-1-4の具体的な次数は114です

3 つの動作メカニズムに基づいて、3 つのルールが要約され、あらゆる状況に適用されます。

1) ID セレクターはクラスセレクターより大きく、クラスセレクターはラベルセレクターよりも大きくなります。一言で言えば、特異性の高いセレクター (より具体的な選択) が選択されます。

2) ブラウザは HTML ドキュメントの順序で各スタイルシートを読み取り、後のスタイルシートは前のスタイルシートと同じ属性を持つスタイルを上書きします。次のスタイルの特異性が低い場合、前のスタイルを上書きすることはできません

注: ルール 1 はルール 2 よりも強力です。特異性が高い場合は、それがどこにあっても (行内を除く)、選ばれる。インラインスタイルが最も優先されます (ただし、インラインスタイルは通常は使用されません。42c0d80b735603303970f6f0b2b5acf6)、次に詳細度が続きます。

3) 設定されたスタイルは継承されたスタイルよりも優れています

例子1 ：id选择器优于类选择器<style>    .li1{color: red;}    #li1{color:yelow;}</style><link rel="stylesheet" href="demo.css"></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>              </ul>   </div>列表1为黄色

例子2 ：嵌入样式表和外部样式表，选哪个（主要看浏览器按顺序，后读取的会覆盖点前面读取的），相同特指度的时候<link rel="stylesheet" href="demo.css"><style>    .li1{color: red;}</style></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>（黄色）外部样式表demo.css

.li1{

color: yellow;}

すごい

c9ccee2e6ea535a969eb3f532ad9fe89

.li1{color: red;}
531ac245ce3e4fe3d50054a55f265927
ff731f9a736747fe1b83838cf6a5eaa5
9c3bca370b5104690d9ef395f2c5f8d1

は黄色です

如果是这个顺序，style标签在前，link在后

demo.css

div #li1{

color: yellow;}

例子3：选择特指度高的（如按顺序，应该选择link的黄色，但是style中的特指度高 1-0-2 大于 1-0-1，所以选特指度高的红色），后面读取的特指度低的就不会覆盖前面特指度高的。<style>    body div #li1{color: red;}</style><link rel="stylesheet" href="demo.css"></head><body>    <div id="div1">        <ul class="ul1">            <li id="li1" class="li1">列表项1</li>

为红色

例子4：行内style有最高优先级，前面的代码不变，只在p中加了style blue,列表项立马变成蓝色虽然行内的有最高优先级，但是行内style本身就不常用（不方便移植，增加网页大小）<li id="li1" class="li1" style="color:blue;">列表项1</li>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：フォント:inherit_html/css_WEB-ITnose次の記事：フォント:inherit_html/css_WEB-ITnose

続きを見る

CSS の仕組み (スタイルが繰り返されるタグの場合、ブラウザはどのスタイルを選択するか)_html/css_WEB-ITnose

関連記事