CSS の旅 - 第三の目的地強力な Pseudo-Selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の旅 - 第三の目的地強力な Pseudo-Selector_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:45:02

オリジナル

1169 人が閲覧しました

疑似セレクターと言えば、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 ではなくなっていると感じますか?