CSS 組み合わせセレクター

組み合わせセレクター

タグセレクター、クラスセレクター、IDセレクターを組み合わせて使用​​できます。一般的な組み合わせ方法としては、タグセレクタとクラスセレクタの組み合わせ、タグセレクタとIDセレクタの組み合わせがあります。これら 2 つの組み合わせ方法の原理と効果は同じであるため、タグ セレクターとクラス セレクターの組み合わせのみを紹介します。組み合わせセレクターは単なる組み合わせの形式であり、実際のセレクターではありませんが、実際にはよく使用されます。

例: .orderlist li {xxxx} または .tableset td {}
これを使用するときは、通常、li td dd など、繰り返し表示され、同じスタイルを持ついくつかのタグで使用します。 sypered＆lt; h1 class = "red"＆gt;＆lt;/h1＆gt;
A,B すべての A 要素と B 要素を同時に照合し、A と B の間をカンマで区切ります。

2. A B 子孫要素セレクター、すべての要素を照合します。 A 要素の子孫である B 要素に属し、A と B の間はスペースで区切られます。 、A 要素のすべての子要素 ​​B に一致します div > Strong { color:#f00; }

4. A + B 隣接要素セレクター、A 要素の直後のすべての兄弟要素 B に一致します p + p { color: # f00; }
5. A ~ B 通常の隣接要素セレクター。指定された要素のすべての隣接要素に一致します。 div ~ p { color: #f00; }

複数要素セレクター

</style>

//html code

< ; div class="mydivred"> div.mydivred</div>;

<p class="mypred"> p.mypred</p>

お試しください

子孫要素セレクター

<>

#Fuji .ziji

{

padding:10px;

border:1px #000000 Solid;color:red;

}

</style>

<div id="Fuji">

<div class="ziji"</div> ;

</div>

サブ要素の選択
<style>

#zys>スパン

{

padding:10px;

background-color:#ffffff;

ボーダー:1px #000000 ソリッド;カラー:レッド;

}

</style>

<div id="zys">

<スパンclass="any"> div.ziji</span>

</div>;

試してみましょう

<スタイル>

<div>

試してくださいそれをアウト

通常の隣接要素セレクター

div~ p

{背景色: 緑;
}

<p>第3項。ディビジョン内ではありません。 </p>

<p>第4項。ディビジョン内ではありません。 </p>

試してみる