- 前に書かれている：Bilibili dark horse programmer pink Teacherのチュートリアルを参照してください
- アドレス：https : //www.bilibili.com/video/BV14J4114768?t=328&p=26
目次
CSSの3つの主要な機能
CSSスタッカビリティ
- 概念：
- いわゆるスタッカビリティとは、複数のCSSスタイルの重ね合わせを指します。
- これは、競合を処理するブラウザの機能です。2つの同一のセレクタを介して属性が同じ要素に設定されている場合、この時点で1つの属性が他の属性をカスケードします
- 原則として：
- スタイルの矛盾については、従うべき原則は近接性の原則です。パターンが構造に近い場合は、そのパターンを実行します。
- スタイルの競合、カスケードなし
- 場合：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; font-size: 30px; } div { color: pink; } </style> </head> <body> <div> 长江后浪推前浪，前浪死在沙滩上。 </div> </body> </html>
CSS継承
- 概念：
- 子タグは、テキストの色やフォントサイズなど、親タグの特定のスタイルを継承します。
- 継承可能なプロパティを設定するには、それを親要素に適用するだけです。
- 単純な理解は：息子は父親の相続を受け継ぐ
- 注：
- 継承を適切に使用することで、コードを簡素化し、CSSスタイルの複雑さを軽減できます。たとえば、特定のスタイルを必要とする多くの子があり、親に割り当てることができ、これらの子はそれを継承します。
- 子要素は親要素のスタイルを継承できます（text-、font-、line-これらの要素は最初に継承でき、color属性）
- 場合：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: yellow; } </style> </head> <body> <div> <p>博人</p> </div> </body> </html>
CSSの優先度（強調）
- 概念：
- CSSスタイルを定義するとき、2つ以上のルールが同じ要素に適用されることがよくあります。現時点では、
- セレクタが同じ場合、カスケードが実行されます
- 異なるセレクターは優先順位の問題を引き起こします
重量計算式
- CSSの重みについては、計算する一連の計算式が必要です。これはCSSの特異性（特異性）です。
ラベルセレクター 計算式 継承または* 0、0、0、0 各要素（タグセレクタ） 0、0、0、1 各クラス、疑似クラス 0、0、1、0 各ID 0、1、0、0 各インラインスタイルstyle = "" 1,0,0,0 すべての！重要な ∞無限
- 値は左から右にあり、左側が最大で、最初のレベルは最初のレベルよりも大きく、数字間にベースがなく、レベルを超えることはできません。
- CSSの重みについては、計算する一連の計算式が必要です。これはCSSの特異性（特異性）です。
div { color: pink!important; }
- ケース：CSSの優先度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { color: red; }*/ /*标签选择器 权重 0,0,0,1 小组长*/ div { color: pink!important; } /*类选择器 权重 0,0,1,0 班长*/ .one { color: blue; } /*id 选择器 权重 0,1,0,0 班主任*/ #two { color: green; } /*style= 行内样式表 权重 1,0,0,0 校长*/ /*!important 在样式属性的后面添加 权重最高 ∞ 教育局局长*/ </style> </head> <body> <div class="one" id="two" style="color: yellow;"> 权重还有30秒到达战场 </div> </body> </html>
重り
- 複数の基本セレクターで構成されている交差セレクター、子孫セレクターなどを使用することがよくありますが、その場合は、重みが重複します。
- 単純な加算計算です
- 注意：
数字の間にベースはありません。たとえば、 0,0,0,5 + 0,0,0,5 = 0,0,0,10の代わりに、0,0、1、0の代わりに10 divはありません。クラスセレクターに追いつくことができます。
- ケース：重複する権利
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*出现了权重叠加的现象 */ /*.nav a 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */ .nav a { color: red; } /*.first 权重 0,0,1,0*/ /*.first { color: pink; }*/ /*0020*/ .nav .first { color: pink; } /*0,0,0,5 + 0,0,0,5 = 0,0,0,10*/ </style> </head> <body> <div> 人生四大悲 </div> <div class="nav"> <a href="#" class="first">家里没宽带</a> <a href="#">网速不够快</a> <a href="#">手机没流量</a> <a href="#">学校无wifi</a> </div> </body> </html>
継承された重みは0です
- これは難しくありませんが、無視すると混乱しやすくなります。実際、スタイルを変更するときは、ラベルが選択されているかどうかを確認する必要があります。
- 選択した場合、上記の式に従って重みが計算されます。誰が誰に聞くか。
- 選択されていない場合、継承された重みは0であるため、重みは0です。
- ケース：継承された重みは0です
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: red; } p { color: green; } /*因为demo 没有选p标签，所以 继承的权重为 0*/ .demo { color: blue; } #test { color: pink; } </style> </head> <body> <div class="demo" id="test"> <p>继承的权重为 0</p> </div> </body> </html>
