ホームページ > 記事 > ウェブフロントエンド > CSS の旅 (3): 強力な Pseudo-Selector_html/css_WEB-ITnose
CSS の旅 (3): 強力な Pseudo-Selector_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:11:071095ブラウズ
疑似セレクターと言えば、CSS がどれほど強力であるかを実感しました。あまりにも強力なので、もう CSS を認識していないようです。 C# 6.0 の糖衣構文。 。 。まず、事前に VS でプレビューできます。
ご覧のとおり、上記には非常に多くの疑似クラスがあり、あまりにも多すぎてほとんど目が見えなくなりました。 。 。以下では、より実践的なものについていくつか説明しましょう。
One:nth-child 擬似セレクター
jquery には、:nth-child、:first-child、:last-child、:only-child、this に対応する「サブクラス セレクター」と呼ばれるセレクターがあることがわかっています。これは CSS でも実行できるため、jquery の負担がある程度軽減されると言えます。以下に簡単な例を示します。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li:nth-child(1) { color: red; } </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></body>
:nth-child(1) を入力すると、ul の最初の li の色が赤に変わっていることがわかります。より複雑な場合は、ブラウザーで 1 を n に変更できます。 CSS 疑似クラス
セレクターを解析する場合、対応するメソッドを内部で呼び出して、dom に対応するノードを解析する必要があります。 まず、n が 1 のステップ サイズで 0 から増加することを理解する必要があります。これはと同じです。 jquery の nth -child も同様です。言うことはありません。次に、first-child と last-child を試してみましょう。
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul li:first-child { color: red; font-weight:800; } ul li:last-child { color: blue; font-weight: 800; } </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></body></html>
two :checked, :unchecked,:disabled,:enabled
同様に、jquery には、「フォーム オブジェクト プロパティ」と呼ばれる一連のセレクターがあります。jquery のオンライン ドキュメントを参照してください。
また、これらの属性が CSS にも存在することを発見して非常に嬉しく思います。 。 。少し酔い始めていますか？ 。 。まだチラホラ。
1. 無効、有効
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> input[type='text']:enabled { border: 1px solid red; } input[type='text']:disabled { border: 1px solid blue; } </style></head><body> <form> <input type="text" disabled="disabled" /> <input type="text"/> </form></body></html>
2. チェック済み、未チェック
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> form input[type="radio"]:first-child:checked { margin-left: 205px; } </style></head><body> <form> <input class="test" type="radio" value="女" /><span>女</span><br/> <input class="test" type="radio" value="男" /><span>男</span> </form></body></html>
3. 選択済み
これは、以下に示すように、option:checked で置き換えることができます。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> option:checked { color: red; } </style></head><body> <form> <select> <option>1</option> <option>2</option> <option>3</option> </select> </form></body></html>
3 つの空の疑似セレクター
このセレクターは、jquery では「コンテンツ セレクター」と呼ばれ、空の要素を見つけるために使用されます。
以下は、最初の空の p の背景色を変更する例です。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> p:first-child{ width:500px; height:20px; } p:empty { background:red; } </style></head><body> <p></p> <p>他好</p></body></html>
Four: not(xxx) pseudo-selector
同様に、これも JQuery では「基本セレクター」と呼ばれるものです。 ? ?
一般に、上記を読むと、いくつかの「スクリプト処理動作」が CSS3 に組み込まれているように感じられますか? この感覚は、CSS がかつて知っていた CSS ではなくなっているということです。