1. ワイルドカードセレクター
すべての要素に一致*{color:red;}
2. タグセレクター
すべての p 要素に一致p{color:red;}
3. ID セレクター
ID="div1" の要素と一致します#div1{color:red;}
4. クラス セレクター
class="red" の要素と一致します、CSS と HTML は大文字と小文字を区別しませんただし、ID では大文字と小文字が区別されます。.red{color:red;}
複数のクラスをクラス名の間にスペースで区切って適用します、class="red green"。この要素には赤と緑のすべてのルールが適用され、繰り返しルールのうち 1 つだけが有効になりますが、クラス内のクラス名の順序には依存せず、CSS で定義された順序に依存します。
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 .red{ 7 background:red; 8 height:50px; 9 }10 .green{11 background:green;12 }13 </style>14 </head>15 <body>16 <div class="red">div1</div>17 <div class="green red">div2</div>18 <div class="red green">div3</div>19 </body>20 </html>効果:
スタイルが次のように変更された場合:
1 <style type="text/css">2 .green{3 background:green;4 }5 .red{6 background:red;7 height:50px;8 }9 </style>効果は次のとおりです:
複数の特定のクラス名を持つクラス要素を照合する同時に、優先度 単一クラスセレクターよりも高く、同じクラス名の順序は影響を受けません。
1 <style type="text/css"> 2 .red{ 3 background:red; 4 height:50px; 5 } 6 .green{ 7 background:green; 8 } 9 .green.red{10 background:blue;11 }12 </style>効果:
5. 属性セレクター
特定の属性を持つ要素と一致する[attr]{color:red;}
特定の属性を持つ要素とその属性値が等しいものを一致させる特定の値への要素
[title="div1"]{color:red;}
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 [title]{ 7 background:red; 8 } 9 [title="div1"]{10 background:blue;11 }12 </style>13 </head>14 <body>15 <div title="div1">div1</div>16 <div title="div2">div2</div>17 </body>18 </html>効果:
その他の属性セレクター:
| 選択に使用されます属性値 指定された語彙を含む要素。 | |
| は、指定された値で始まる属性値を持つ要素を選択するために使用されます (単語全体である必要があります)。 | |
| 属性値が指定された値で始まるすべての要素と一致します。 | |
| 属性値が指定された値で終わるすべての要素と一致します。 | |
| 属性値に指定された値が含まれるすべての要素と一致します。 |
子孫セレクター
div span{color:red;}
子要素セレクター
div>span{color:red;
の使用上記のセレクターの組み合わせでは、子孫セレクターは特定の親要素内のすべての子孫要素に一致し、子セレクターは特定の親要素内の子要素の世代 (孫を除く) に一致します。
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 div span{ 7 background:red; 8 } 9 div > span{10 background:blue;11 }12 div,p{13 border:1px solid black;14 padding:5px;15 }16 17 </style>18 </head>19 <body>20 <div>21 <span>div的子元素span1</span>22 </div>23 <br/>24 <div>25 <span>div的子元素span2</span>26 <p>27 <span>p的子元素、div的孙元素span3</span>28 </p>29 </div>30 </body>31 </html>効果:
7. 隣接する兄弟セレクター次に隣接する兄弟要素と一致する
div+span{color:red;}
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 div+span{ 7 background:red; 8 } 9 div,p,span{10 border:1px solid black;11 margin:5px;12 padding:5px;13 line-height:40px;14 }15 </style>16 </head>17 <body>18 <div>div1</div>19 <span>div1的邻居span1</span>20 21 <div>div2</div>22 <p>div2的邻居p<span>p的子元素span2</span></p>23 <span>p的邻居span3</span>24 </body>25 </html>効果:
8 . カンマセレクター複数のセレクターの組み合わせの結果と一致します
h1,span{color:red;}
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 h1,span{ 7 background:red; 8 } 9 </style>10 </head>11 <body>12 <h1>h1</h1>13 <span>span</span>14 </body>15 </html>効果:
9. 疑似クラスセレクターAnchまたは疑似クラス、具体的には、アンカー要素の各状態に対して
a:link{...}
a:visited{...}
a:hover{...}
a:active{.. .}
定義されている場合、ホバーはリンクと訪問の後にある必要があり、アクティブはホバーの後にある必要があります。
:first-child 擬似クラスは最初の要素を選択します
:last-child 擬似クラスは最後の要素を選択します
:nth-child(n) 擬似クラスは n 番目の要素を選択します
:nth-last-child( n) 擬似クラスは最後の要素から n 番目の要素を選択します
: first-line 擬似クラスはテキストの最初の行を選択します
: first-letter 擬似クラスはテキストの最初の文字を選択します
: before pseudo-class before the element content 新しいコンテンツを挿入
:after pseudo-class は要素コンテンツの後に新しいコンテンツを挿入します
1 <!DOCTYPE html> 2 <html> 3 <meta charset="UTF-8"/> 4 <head> 5 <style type="text/css"> 6 div:after{ 7 content:'|after|' 8 } 9 div:before{10 content:'|before|'11 }12 </style>13 </head>14 <body>15 <div>div</div>16 <span>span</span>17 </body>18 </html>効果:
あまり一般的ではない CSS3 擬似クラス セレクターもいくつかありますリストされていないものは完了する時間があります。
この選択方法は、JQuery のセレクターと非常によく似ています。JQuery の基本的なセレクターを確認できます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
