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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:42 AM

出典: 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 モデルを理解することが重要です。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7629

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

141

Related knowledge

HTMLは初心者のために簡単に学ぶことができますか？ Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLでの開始タグの例は何ですか？ Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。