CSS Journey - Second Stop さまざまなセレクターをより深く理解する方法_html/css

CSS Journey - Second Stop さまざまなセレクターをより深く理解する方法_html/css_WEB-ITnose

WBOY

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

オリジナル

970 人が閲覧しました

前回の記事で CSS を使用する必要がある理由について説明しました。この記事では、ブラウザがリモート HTML を dom モデルに解析することは誰もが知っています。

xml 形式でないと、「乱雑な」文字列の束になってしまいます。この場合、それが何であるか誰も知りませんし、js はさまざまな getElementById を実行できないため、ブラウザがそれを dom

構造に解析するときに、ブラウザは、さまざまな CSS ルールのセレクターに従って dom 構造内の対応する位置を見つけるのに非常に便利です。そうすると、次の問題は当然深刻になります。つまり、dom モデルを深く理解する必要があります。

1: Dom モデルを理解する

まず、以下のコードを見てみましょう。

 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 </head> 7 <body> 8     <p>有名的公司一栏</p> 9     <hr />10     <ul>11         <li>百度</li>12         <li>新浪</li>13         <li>阿里</li>14     </ul>15 </body>16 </html>

ログイン後にコピー

このコードを使用すると、簡単に dom ツリーを描画できます。

この DOM ツリーを見ると、情報量が非常に多いように感じませんか? それは非常に単純ですが、ツリーなので、「子ノード」などのいくつかのツリーの特徴があります。「fatherノード」、

「brotherノード」、「最初に左の子」、「最後に左の子」など、後述する様々な状況に対応しています。 HTMLが剥がされる感じを見てみましょうあまりクールではありません~~~~

1: 子ノード

子ノードの検索は基本的に 2 つのタイプに分かれており、実際には「子ノード」を検索するものと「すべての子 (子孫を含む) を検索する」もののみです

<1> 子孫セレクター

まず、以下の HTML を見てください。次の質問は、ボディ内のすべての子孫スパンをどのように描画するかです。

 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     <style type="text/css"> 7         body span { 8             color: red; 9         }10     </style>11 </head>12 <body>13     <span>我是span1</span>14     <ul>15         <li>16             <ul><span>我是span2</span></ul>17         </li>18     </ul>19 </body>20 </html>

ログイン後にコピー

2. 子セレクター

<1> の再生方法

これも、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     <style type="text/css"> 6         body > span { 7             color: red; 8         } 9     </style>10 </head>11 <body>12     <span>我是span1</span>13     <ul>14         <li>15             <ul><span>我是span2</span></ul>16         </li>17     </ul>18 </body>19 </html>

ログイン後にコピー

<2> 「疑似セレクター」ゲームプレイ

上記のゲームプレイに加えて、CSS3 では「疑似セレクター」ゲームプレイを使用することもできます。これは非常に強力です。次の記事。ここでは、nth-child の使用法を 1 つだけ説明します。jquery を使ったことがある場合は、何も問題ありません。

 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     <style type="text/css"> 7         body > span:nth-child(1) { 8             color: red; 9         }10     </style>11 </head>12 <body>13     <span>我是span1</span>14     <span>我是span2</span>15     <ul>16         <li>17             <ul><span>我是span3</span></ul>18         </li>19     </ul>20 </body>21 </html>

ログイン後にコピー

3. 兄弟ノード

兄弟ノードもわかりやすいですが、2 番目の 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     <style type="text/css"> 7         .test + p { 8             color:red; 9         }10     </style>11 </head>12 <body>13     <p class="test">我是第一个段落</p>14     <p>我是第二个段落</p>15 16 </body>17 </html>

ログイン後にコピー

4. 属性セレクター

jquery を使ったことがある方には、この属性セレクターについて明確にしておきたいと思います。まず、name=test を持つ p 要素を見つけます。赤くマークします。

 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     <style type="text/css"> 6         p[name='test'] { 7             color: red; 8         } 9     </style>10     <script src="Scripts/jquery-1.10.2.js"></script>11 </head>12 <body>13     <p name="test">我是第一个段落</p>14     <p>我是第二个段落</p>15 </body>16 </html>

ログイン後にコピー

ここまでで、ゲームプレイはjqueryと全く同じ、という感覚がどんどん強くなり、「わかる」の領域に達していると感じますか。

2: css の内部機構についての推測

記事の冒頭でも述べたように、ブラウザはで定義された「タグ」を元に、dom で指定された「タグ」にこのタグのスタイルを適用します。たとえば、CSS で

p スタイルを定義しましたが、ブラウザはどのようにして dom 内のすべての p 要素を見つけることができるでしょうか? ? ? クローズドソースなので内部の仕組みは分かりませんが、jquery上ではCSSで表示できるセレクターの使い方がjqueryでできるので、その一端を垣間見ることができるかも知れません

2。 jquery がさまざまなセレクター記述メソッドをどのように抽出するかを見るのが待ちきれません。ソースコードを見てみましょう。

 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  8     <style type="text/css"> 9         p[name='test'] {10             color: red;11         }12     </style>13 14     <script src="Scripts/jquery-1.10.2.js"></script>15     <script type="text/javascript">16 17         $(document).ready(function () {18 19  $("p[name='test']").hide(); 20         });21     </script>22 </head>23 <body>24     <p name="test">我是第一个段落</p>25     <p>我是第二个段落</p>26 </body>27 </html>

ログイン後にコピー

jquery でいくつかの検索を行った後、最終的には queryselectorAll のネイティブメソッドのみが呼び出されていることがわかります。最終的な

の結果は、見つかった p 要素を順番に示しています。確認するために、淘宝網のページでコンソールを開いてみました。

これまでのところ、私は大まかな推測を持っていますが、おそらく少なくとも Chrome ブラウザーでは、ブラウザーは dom 内の指定された要素を見つけるために queryselectAll メソッドも呼び出す可能性があります。。。

以上です。ブラウザのその後のレンダリング動作を理解するには、DOM モデルを理解することが重要です。