ホームページ  >  記事  >  ウェブフロントエンド  >  CSS複合セレクターとは何ですか?

CSS複合セレクターとは何ですか?

藏色散人
藏色散人オリジナル
2019-05-17 13:17:277492ブラウズ

CSS複合セレクターとは何ですか?

css 複合セレクターは、より正確かつ詳細なターゲットを選択するために、さまざまな方法で組み合わせられた 2 つ以上の基本セレクターで構成されています。

CSS 複合セレクターには、サブセレクター、隣接セレクター、包含セレクター、マルチレベル セレクターのネスト、属性セレクター、擬似セレクター、擬似要素セレクターが含まれます。

具体的な使用法上記の内容は次のとおりです:

1. サブセレクター、コードは次のとおりです:

<style type="text/css">
#pic>img{ // 使用 > 号,让选择器只选择直接的子类,width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>

2. 隣接セレクター

別の要素の直後の要素を選択する必要があり、両方の要素が同じ親要素を持つ場合は、隣接兄弟セレクター (隣接兄弟セレクター) を使用できます。

たとえば、h1 要素の直後に表示される段落の上マージンを増やしたい場合は、次のように記述できます:

h1 + p {margin-top:50px;}

このセレクターは次のようになります: "段落を選択しますh1 の直後 h1 要素と p 要素の後にある段落には、共通の親要素があります。

3. インクルードセレクター

コードは次のとおりです:

#header p{font-size:14px}
#main p {font-size:12}

Definition

以上がCSS複合セレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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