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 つのタイプに分かれており、実際には「子ノード」を検索することと「すべての子 (子孫を含む) を検索する」ことのみです

まず、以下の 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. 子セレクター

の再生方法

これも、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>

ゲームプレイ

上記のゲームプレイに加えて、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 までご連絡ください。

HTMLタグと属性に一貫したコーディングスタイルを使用することの重要性を説明します。May 01, 2025 am 12:01 AM

コードの読みやすさ、保守性、効率を向上させるため、一貫したHTMLエンコーディングスタイルは重要です。 1）低ケースタグと属性を使用します。2）一貫したインデントを保持し、3）シングルまたはダブルの引用符を選択して固執する、4）プロジェクトのさまざまなスタイルの混合を避け、5）きれいなスタイルやEslintなどの自動化ツールを使用して、スタイルの一貫性を確保します。

ブートストラップ4にマルチプロジェクトカルーセルを実装する方法は？Apr 30, 2025 pm 03:24 PM

Bootstrap4にマルチプロジェクトカルーセルを実装するソリューションBootstrap4にマルチプロジェクトカルーセルを実装するのは簡単な作業ではありません。ブートストラップですが...

DeepSeekの公式Webサイトは、マウススクロールイベントの浸透の影響をどのように達成していますか？Apr 30, 2025 pm 03:21 PM

マウススクロールイベントの浸透の効果を実現する方法は？ Webを閲覧すると、いくつかの特別なインタラクションデザインに遭遇することがよくあります。たとえば、DeepSeekの公式ウェブサイトでは、...

HTMLビデオの再生コントロールスタイルを変更する方法Apr 30, 2025 pm 03:18 PM

HTMLビデオのデフォルトの再生コントロールスタイルは、CSSを介して直接変更することはできません。 1. JavaScriptを使用してカスタムコントロールを作成します。 2。CSSを介してこれらのコントロールを美化します。 3. video.jsやPLYRなどのライブラリを使用すると、互換性、ユーザーエクスペリエンス、パフォーマンスを検討してください。プロセスを簡素化できます。

お使いの携帯電話でネイティブセレクトを使用することにより、どのような問題が発生しますか？Apr 30, 2025 pm 03:15 PM

携帯電話でネイティブセレクトを使用する際の潜在的な問題は、モバイルアプリケーションを開発するときに、ボックスを選択する必要があることがよくあります。通常、開発者...

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？Apr 30, 2025 pm 03:12 PM

お使いの携帯電話でネイティブ選択を使用することの欠点は何ですか？モバイルデバイスでアプリケーションを開発する場合、適切なUIコンポーネントを選択することが非常に重要です。多くの開発者...

Three.jsとOctreeを使用して部屋で3人のローミングの衝突処理を最適化する方法は？Apr 30, 2025 pm 03:09 PM

Three.JSとOctreeを使用して、部屋でのサードパーソンローミングの衝突処理を最適化します。 3つのjsでoctreeを使用して、部屋でサードパーソンローミングを実装し、衝突を追加してください...

お使いの携帯電話でネイティブセレクトを使用する場合、どのような問題が発生しますか？Apr 30, 2025 pm 03:06 PM

モバイルデバイスでアプリケーションを開発する際に携帯電話でネイティブセレクトの問題は、ユーザーが選択を行う必要があるシナリオに遭遇することがよくあります。ネイティブセル...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

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

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、