CSS Journey - Second Stop さまざまなセレクターをより深く理解する方法_html/css_WEB-ITnose
前回の記事で 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 モデルを理解することが重要です。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7564
15
1386
52
87
11
28
101
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
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を構築します。
