CSS セレクターの最も基本的な知識を理解した後は、CSS セレクターを包括的に使用する必要があります。一般的な使用法をいくつか示します。
1. 対象を絞った方法でクラス セレクターまたは ID セレクターを使用する
クラス セレクターはページ上のさまざまな場所に適用される場合があるため、対象を絞った方法でクラス セレクターを使用する必要があります。次の例のように:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myContent{ 8 font-size: 12px; 9 color: #00f;10 }11 p.myContent{12 font-size: 25px;13 line-height: 5px;14 text-decoration:underline;15 font-weight:bold;16 color: #f00;17 }18 </style>19 </head>20 <body>21 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>22 <p class="myContent">1与世界同步，做一个成功的页面仔</p>23 <span class="myContent">2让我们看看css多么奇妙吧</span>24 </body>25 </html>この例では、スタイルで .myContent css クラスと組み合わせセレクター p.myContent ( p と .myContent の間にスペースがないことに注意してください )、および div、p を定義します。ページ内で、span 要素も myContent クラスを参照しますが、p.myContent が存在するため、次の図に示すように、div と spam のテキストは青になり、p のテキストは赤になります。
このアプリケーションでは、ID セレクターはクラス セレクターと似ており、次の例のように . を # (p#myId) に置き換えるだけです
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myContent{ 8 font-size: 12px; 9 color: #00f;10 }11 p#myId{12 font-size: 25px;13 line-height: 5px;14 text-decoration:underline;15 font-weight:bold;16 color: #f00;17 }18 </style>19 </head>20 <body>21 <!--<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>-->22 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>23 <p id="myId">1与世界同步，做一个成功的页面仔</p>24 <span class="myContent">2让我们看看css多么奇妙吧</span>25 </body>26 </html>実行結果は上の図と同じです。 。
2. セレクター グループ
同じ定義を持つ複数のセレクターをマージします。次の例では、p、クラス セレクター .myContent、および ID セレクター #myId が、フォント サイズの赤、太字、下線付きのテキストとして定義されています。 of 25pxp,.myContent,#myId {property:value;}、カンマで区切られていることに注意してください。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p,.myContent,#myId{ 8 font-size: 25px; 9 text-decoration:underline;10 font-weight:bold;11 color: #f00;12 }13 </style>14 </head>15 <body>16 <!--<p>css很强大，<span>可以控制页面<strong>任何元素</strong>的样式</span><strong>dfd</strong></p>-->17 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>18 <p>1与世界同步，做一个成功的页面仔</p>19 <span id="myId">2让我们看看css多么奇妙吧</span>20 </body>21 </html>実行結果は以下の通りです
3. CSSの優先順位
複数のスタイル: 外部スタイル、内部スタイル、インラインスタイルが同じ要素に同時に適用される場合、これは複数のスタイルを使用する場合です。通常、このときの優先順位は以下の通りです。!重要なスタイル>インラインスタイル(HTML要素内のスタイル)>外部スタイルシート(外部から導入) in head) > ブラウザのデフォルトのスタイル
例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p,.myContent,#myId{ 8 font-size: 25px; 9 text-decoration:underline;10 font-weight:bold;11 color: #f00;12 }13 </style>14 </head>15 <body>16 <div class="myContent">css很强大，可以控制页面任何元素的样式</div>17 <p style="color: blue">1与世界同步，做一个成功的页面仔</p>18 <span id="myId">2让我们看看css多么奇妙吧</span>19 </body>20 </html>headのスタイルではpタグ内のテキストスタイルの色が赤に設定されていますが、HTMLのp要素ではその色( blue) も style 属性を通じて設定されます。インライン スタイルは内部スタイル シートよりも優先されるため、次の図に示すように、p タグ内のテキストは青色になります。
4. CSS の重み
複数のスタイルが同じ要素を変更するときにどの CSS を使用するかをより正確に決定するには、重み付け方法を使用できます。つまり、各タイプのセレクターに重みを割り当てます。を選択し、表示されるセレクターの組み合わせの重み付けを計算します。最も高いスコアを持つものが最終的なスタイルになります。タグセレクター、疑似クラス、疑似オブジェクト: 重みは 1 です。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 p { 8 color:blue; 9 }10 /*p * {color: red;}*/11 p.myColor{12 color: black;13 }14 .myColor{15 color: yellow;16 }17 #myId{18 color: green;19 }20 </style>21 </head>22 <body>23 <p>Hello</p>24 <p class="myColor">css很强大，可以控制页面任何元素的样式</p>25 <p class="myColor" id="myId">1与世界同步，做一p st页面仔</p>26 <p style="color: red" class="myColor">2让我们看看css多么奇妙吧</p>27 </body>28 </html>分析: コードでは、各セレクターの重み付け後に得られるポイントは次のとおりです
p=1
p.myColor=1+10=11
.myColor=10
#myId=100
style="color: red"=1000<br /><br />所以，“Hello”为蓝色（p=1）；“css很强大，可以控制页面任何元素的样式”为黑色（p.myColor=1+10=11）；“1与世界同步，做一p st页面仔”为绿色（#myId=100）；“2让我们看看css多么奇妙吧”为红色（style="color: red"=1000），如下图所示。<br /><br /><strong>5.css引入顺序的影响</strong><br />在head中的style中定义样式（.myColor1和.myColor2）的顺序以及在HTML元素p中引用这些类时的顺序会产生怎样的影响呢？我们做个试验。<br />a.首先在head的style中首定义.myColor1，再定义.myColor2；然后在p中分别引入两个类，但顺序不同<p class="myColor1 myColor2">css很强大，可以控制页面任何元素的样式</p><p class="myColor2 myColor1">1与世界同步，做一个页面仔</p>，代码如下：<br />
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css-test</title> 6 <style> 7 .myColor1{ 8 color: red; 9 }10 .myColor2{11 color: blue;12 }13 </style>14 </head>15 <body>16 <p class="myColor1 myColor2">css很强大，可以控制页面任何元素的样式</p>17 <p class="myColor2 myColor1">1与世界同步，做一个页面仔</p>18 <p>2让我们看看css多么奇妙吧</p>19 </body>20 </html>
css は非常に強力で、ページ上の任意の要素のスタイルを制御できます1 世界と同期してページを作成します
、コードは次のとおりです:
运行结果如下图：<br /><br />
実行結果は次のとおりです:
上記の 2 つの実験を通じて、CSS は定義の順序にのみ関係し、要素内の参照の順序には関係しないことがわかります。実際、これが、CSS が以前に定義されたスタイルを上書きする理由です。スタイルカスケードテーブルと呼ばれます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
