CSS Journey (2): さまざまなセレクターをより深く理解する方法_html/css

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

WBOY

リリース： 2016-06-24 11:42:04

オリジナル

1097 人が閲覧しました

出典: First-line coder

前回の記事では、CSS を使用する必要がある理由について説明しました。この記事では、ブラウザーがリモート HTML を解析して、セレクターから始めます。 DOM モデルを使用すると、HTML は XML 形式になります。そうでない場合、それが何であるか誰も分からず、ブラウザがそれを解析するときに、js はさまざまな getElementById を実行できません。 dom 構造への変換その後、ブラウザはさまざまな CSS ルールのセレクターに従って、dom 構造内の対応する位置を簡単に見つけます。次の問題は当然深刻です。つまり、dom モデルを深く理解する必要があります。

1: Dom モデルを理解する

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

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title></head><body>    <p>有名的公司一栏</p>    <hr />    <ul>        <li>百度</li>        <li>新浪</li>        <li>阿里</li>    </ul></body></html>

ログイン後にコピー

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

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

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

1: 子ノード

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

<1> ; 子孫セレクター

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

<!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">        body span {            color: red;        }    </style></head><body>    <span>我是span1</span>    <ul>        <li>            <ul><span>我是span2</span></ul>        </li>    </ul></body></html>

ログイン後にコピー

2. 子セレクター

<1> の再生方法

これも、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">        body > span {            color: red;        }    </style></head><body>    <span>我是span1</span>    <ul>        <li>            <ul><span>我是span2</span></ul>        </li>    </ul></body></html>

ログイン後にコピー

<2> ゲームプレイ

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

<!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">        body > span:nth-child(1) {            color: red;        }    </style></head><body>    <span>我是span1</span>    <span>我是span2</span>    <ul>        <li>            <ul><span>我是span3</span></ul>        </li>    </ul></body></html>

ログイン後にコピー

3. 兄弟ノード

兄弟ノードもわかりやすく、2 番目の 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">        .test + p {            color:red;        }    </style></head><body>    <p class="test">我是第一个段落</p>    <p>我是第二个段落</p></body></html>

ログイン後にコピー

4. 属性セレクター

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

<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[name='test'] {            color: red;        }    </style>    <script src="Scripts/jquery-1.10.2.js"></script></head><body>    <p name="test">我是第一个段落</p>    <p>我是第二个段落</p></body></html>

ログイン後にコピー

これまで、ゲームプレイが jquery とまったく同じであると感じたことはありますか? そしてその感覚はますます強くなり、「わかる」の領域に達しました。

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

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

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

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

<!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[name='test'] {            color: red;        }    </style>    <script src="Scripts/jquery-1.10.2.js"></script>    <script type="text/javascript">        $(document).ready(function () {            $("p[name='test']").hide();        });    </script></head><body>    <p name="test">我是第一个段落</p>    <p>我是第二个段落</p></body></html>

ログイン後にコピー

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

results が見つかった p 要素であることも明確に確認できます。タオバオページの下にあるコンソール。

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

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