CSS複合セレクターとは何ですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

藏色散人

May 17, 2019 pm 01:17 PM

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

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

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

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

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

<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"   alt="photo" />
<span><img src="/static/imghw/default1.png"  data-src="btn"  class="lazy"   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

包含ボックス段落のフォントサイズは 14 ピクセルです。
Define

包含ボックス内の段落のフォントサイズは 12 ピクセルです。

4。マルチレベルセレクターのネスト

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

#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}

ログイン後にコピー

5. 属性セレクター

(1) 一致属性名セレクター

div[class] {font-size:24px;}

ログイン後にコピー

このセレクターを有効にして、div に設定されたクラス属性とオブジェクト定義形式を一致させます

(2) 属性値セレクターを一致させます

img[alt="图像"][title="图像"] {border：solid 2px red}：

ログイン後にコピー

to CSS複合セレクターとは何ですか? スタイルの定義

(3) あいまい一致属性値セレクター

6、擬似セレクターと擬似要素セレクター

<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

ログイン後にコピー

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

このウェブサイトの声明

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