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