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; }
複数要素セレクター
//css コード:
<style>
div.mydivred,p .マイプレド
{padding:10px;background-color:#ffffff;border:1px #000000 Solid;color:red;}
</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>
<h2>私の名前はドナルド</h2>
<p>ダックバーグに住んでいます
試してくださいそれをアウト
通常の隣接要素セレクター
div~ p
{背景色: 緑;
}
<div>
<p>第1項。 ディビジョン内で</p>
<p>第 2 項。 ディビジョン内で</p>
</div>
<p>第3項。ディビジョン内ではありません。 </p>
<p>第4項。ディビジョン内ではありません。 </p>
試してみる
