CSS の基礎学習 8: 派生 Selector_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS の基礎学習 8: 派生 Selector_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:33 AM

CSS 構文では、要素の位置のコンテキストに基づいてスタイルを定義することで、マークアップをより簡潔にすることができます。

CSS1 では、この方法でルールを適用するセレクターは、

コンテキスト関係に依存して特定のルールを適用または回避するため、コンテキストセレクターと呼ばれます。 CSS2 では、これらは派生セレクターと呼ばれますが、どのように呼んでも、その効果は同じです。派生セレクターを使用すると、ドキュメントのコンテキストに基づいてタグのスタイルを設定できます。派生セレクターを賢明に使用することで、

HTML コードをよりクリーンにすることができます。コードのコンテキスト。コードはより簡潔になります。

実行の結果を確認できます:

次に、一般的な派生セレクターを見てみましょう。

子孫セレクターは、要素の子孫である要素を選択します。要素の子孫である要素を選択し、いくつかの

スタイルを設定します。

上の例は、標準の子孫セレクターのデモンストレーションです。法语 (2) 文法解釈

子孫の子孫では、ルールの左側のセレクターにスペースを含むセレクターが 2 つ以上含まれています。セレクター間のスペースは、

文字と

文字の組み合わせです。各スペースコンビネータは、「... で見つかった...」、「... の一部として」、「... の子孫として」と解釈できますが、要件は右から順に行う必要があります。

セレクターを読み取ります。構文: セレクター selector [selector...] {}。子孫セレクターの見落とされがちな側面は、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>

ログイン後にコピー

このルールは、最初の h1 の下にある強い要素を赤にしますが、2 番目の強い要素は影響を受けません:

<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>

ログイン後にコピー

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

<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 元素的子元素。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

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

ホットツール

ホットトピック

Java チュートリアル

1674

CakePHP チュートリアル

1429

Laravel チュートリアル

1333

PHP チュートリアル

1278

C# チュートリアル

1257

Related knowledge

HTML：構造、CSS：スタイル、JavaScript：動作 Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTML、CSS、およびJavaScriptの未来：Web開発動向 Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTMLの未来：ウェブデザインの進化とトレンド Apr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要 Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML対CSSおよびJavaScript：Webテクノロジーの比較 Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTML：それはプログラミング言語か何か他のものですか？ Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTMLを超えて：Web開発のための重要なテクノロジー Apr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。