ホームページ > 記事 > ウェブフロントエンド > CSS Journey - Second Stop さまざまなセレクターをより深く理解する方法_html/css_WEB-ITnose
CSS Journey - Second Stop さまざまなセレクターをより深く理解する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:00970ブラウズ
前回の記事で 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 つのタイプに分かれており、実際には「子ノード」を検索するものと「すべての子 (子孫を含む) を検索する」もののみです
f35d6e602fd7d0f0edfa6f7d103c1b57 子孫セレクター
まず、以下の 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. 子セレクター
f35d6e602fd7d0f0edfa6f7d103c1b57 の再生方法これも、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>
2cc198a1d5eb0d3eb508d858c9f5cbdb 「疑似セレクター」ゲームプレイ
上記のゲームプレイに加えて、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 モデルを理解することが重要です。