ホームページ >ウェブフロントエンド >htmlチュートリアル >マジカル CSS3 selector_html/css_WEB-ITnose
マジカル CSS3 selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:40:591426ブラウズ
私は長年庭に携わっていますが、ブログを書いたことはありません。基本的なことを書きたい場合は、css3 セレクターから始めましょう。
Css3 Selector
まず、セレクターの使用を推奨する理由について話しましょう。
- セレクターを使用すると、スタイルを要素に直接バインドでき、どのスタイルがスタイル シート内のどの要素に一致するかが一目でわかり、変更も簡単です。
- スタイルシートのコードの量を減らします。
属性セレクター
1.[att*=val] 属性セレクター
意味: 要素の att で表される属性の属性値に val で表される文字が含まれる場合、要素はこれを使用します。 style
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id*=demo] { width: 100px; height: 100px; background-color: #000099; } </style></head><body><div id="demo"></div></body></html>
2. [att^=val] 属性セレクター
意味：要素の att で表される属性の属性値が val で表される文字列で始まる場合、要素はこのスタイルを使用します。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id^=demo] { width: 100px; height: 100px; background-color: #000099; margin: 10px; } </style></head><body><div id="demo"></div><div id="demo1"></div></body></html> 3. [att$=val] 属性セレクター
意味: att で表される属性の属性値が val で表される文字列で終わる場合、要素はこのスタイルを使用します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> [id$=o] { width: 100px; height: 100px; background-color: #000099; margin: 10px; } </style></head><body><div id="demo"></div><div id="demooo"></div></body></html>
構造擬似クラスセレクター
擬似クラスセレクターは定義されたセレクターを指し、気軽に名前を付けることはできません。
例: a:link,a:visited,a:hover,a:active.
擬似要素セレクターとは、要素に対して定義されたセレクターを指します。
- 最初の行の疑似要素セレクター
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:first-line { color: red; } </style></head><body> <p> hello world <br/> 你好 </p></body></html> 2.最初の文字の疑似要素セレクター
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:first-letter { color: red; } </style></head><body> <p> hello world </p> <p> 你好</p></body></html> <strong>befor伪元素选择器</strong>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:before { content: '*'; } </style></head><body> <ul> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul></body></html> 擬似要素セレクター後
rree
ルートセレクター
ルートセレクターは、スタイルをページのルート要素にバインドします。使用時: ルート要素とボディ要素の背景、条件によって表示効果が異なります
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:after { content: '*'; } </style></head><body> <ul> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> <li>demo1</li> </ul></body></html> not selector
要素を使用しないように構造要素の下にある部分構造要素を除外します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> :root { background-color: #003300; } body { background-color: yellow; } </style></head><body><p>你好</p></body></html> empty selector
要素の内容が空の場合に使用されるスタイル。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body *:not(h1) { background-color: yellow; } </style></head><body><h1>大家好</h1><p>你好</p></body></html> ターゲットセレクター
ターゲットセレクターを使用して、ページ内のターゲット要素にスタイルを適用します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> td:empty { background-color: yellow; } </style></head><body><table border="1"> <tr> <td width="100px">1</td> <td width="100px">2</td> <td width="100px"></td> </tr></table></body></html> 最初の子、最後の子セレクター
最初の子要素と最後の子要素を指定します子要素のスタイル
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> :target { background-color:yellow; } </style></head><body><table border="1"> <a href="#text3">示例1</a> <div id="text1"> <h1>你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div> <div id="text2"> <h1>你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div> <div id="text3"> <h1>你好</h1> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p> </div></table></body></html> nth-child, nth-last-child selector
親要素内で指定されたシーケンス番号を持つ子要素のスタイルを指定します。
Nth-child(even) を使用して偶数番号の要素のスタイルを指定し、Nth-child(odd) を使用して奇数番号の要素のスタイルを指定することもできます
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:first-child { background-color: yellow; } li:last-child { background-color: #009999; } </style></head><body><table border="1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul></table></body></html> nth-of-type nth-last -of-type selector
これら 2 つのセレクターは、nth-child セレクターと nth-last-child セレクターの欠点を補うもので、類似した要素のスタイルのみを指定します。
UI要素ステータスセレクター
E:horver,E:active,E:focusセレクター
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li:nth-child(2) { background-color: yellow; } li:nth-last-child(2) { background-color: #009999; } </style></head><body><table border="1"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>1</li> </ul></table></body></html> E:enabled,E:disabled,E:read-only,E:read-Writeセレクター
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]:hover { background-color: yellow; } input[type="text"]:focus { background-color: green; } input[type="text"]:active { background-color: red; } </style></head><body><input type="text" name="name"></body></html> E: チェック、E: DEFAULT セレクター e: Checked はチェックボックスのスタイルを指定します
e:default はデフォルトの選択ボックスのスタイルを指定します
E::selection セレクター
要素選択時のスタイルを指定
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> input[type="text"]:disabled { background-color: green; } input[type="text"]:read-only { background-color:darkgrey; } </style></head><body><input type="text" disabled><br><input type="text" ><br><br><input type="text" readonly="readonly" ></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p::selection { background-color: goldenrod; } </style></head><body> <p>测试测试</p></body></html>
🎜🎜🎜 🎜🎜🎜🎜🎜