CSS の基礎学習 8: 派生 Selector_html/css_WEB-ITnose
CSS 構文では、要素の位置のコンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。
CSS1 では、この方法でルールを適用するセレクターは、
コンテキスト関係に依存して特定のルールを適用または回避するため、コンテキスト セレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも、その効果は同じです。派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、
HTML コードをよりクリーンにすることができます。コードのコンテキスト。コードはより簡潔になります。
実行の結果を確認できます:
次に、一般的な派生セレクターを見てみましょう。
子孫セレクターは、要素の子孫である要素を選択します。要素の子孫である要素を選択し、いくつかの
スタイルを設定します。
上の例は、標準の子孫セレクターのデモンストレーションです。法语 (2) 文法解釈
子孫の子孫では、ルールの左側のセレクターにスペースを含むセレクターが 2 つ以上含まれています。セレクター間のスペースは、
文字と 文字の組み合わせです。各スペース コンビネータは、「... で見つかった...」、「... の一部として」、「... の子孫として」と解釈できますが、要件は右から順に行う必要があります。
が無限になる可能性があることです。 1 時間、例: H1 SPAN {} H1 にネストされたスパン
<span style="font-size:18px;">li strong { font-style: italic; font-weight: normal; }</span>
(3) 複雑なセレクターを組み合わせた子孫の子孫: .test img {} と#header .btn{} など子要素の選択 (子セレクター) は、子孫と比較して、特定の要素の要素要素として機能することのみを選択できます。子孫セレクターよりも厳密で、特定の要素の子である要素を選択し、いくつかのスタイルを設定します。子要素 (1) 子要素を選択します
子要素を選択したくないが、範囲を狭め、特定の要素の子要素のみを選択したい場合は、子要素セレクターを使用してください。たとえば、h1 要素の子である強い要素のみを選択したい場合は、次のように書くことができます:
<span style="font-size:18px;"><p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p><ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li><li>我是正常的字体。</li></ol></span>
<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">h1 span { color:red;} </style></head><body><h1>12345<span>12345</span></h1><span>12345</span><h1>12345<div><p><span>12345</div></p></span></h1></body></html></span></span>re 実行結果は次のとおりです:
(2) シントロフラリーの説明
子セレクターが数値より大きい (サブバインディング文字) を使用していることに気づいたはずです。サブコンジャンクションの両側に空白文字を含めることができますが、これはオプションです。したがって、
、次の記述は問題ありません:
<span style="font-size:18px;">h1 > strong {color:red;}</span>右から左に読むと、セレクター h1 >strong は「h1 要素の子であるすべての強い要素を選択する」と解釈できます。結合 (3) 子孫セレクターと子セレクターに基づいています
以下のセレクターを参照してください:
<span style="font-size:18px;"><h1>This is <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1></span>
以下のセレクターは、TD 要素のすべての P 要素を選択します。この TD 要素自体は、Table 要素から継承されます。 table 要素には会社を含む
クラス属性があります。
3 css隣接する兄弟セレクター- 。相选择 (1) 隣接する兄弟を選択します
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：
<span style="font-size:18px;">h1 + p { color:#FF0000;}</span><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">h1 + p { color:#FF0000;}</style></head><body><h1>This is a heading.</h1><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p></body></html></span>运行的结果为：
(2)语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符。注释：与子结合符一样，相邻兄弟结合符旁边可以有空
白符。
请看下面这个文档树片段：
<span style="font-size:18px;"><div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol></div></span>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两
个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄
弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
<span style="font-size:18px;">li + li {font-weight:bold;}</span>上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
运行的结果为：(3)结合其他选择器
相邻兄弟结合符还可以结合其他结合符：
<span style="font-size:18px;">html > body table + ul {margin-top:20px;}</span>这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，
body 元素本身是 html 元素的子元素。
版权声明：本文为博主原创文章，未经博主允许不得转载。
ホット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）
ホットトピック
7471
15
1377
52
77
11
19
30
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
