CSS 組合選擇器

組合選擇器

標籤選擇器、類別選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標籤選擇器和類別選擇器組合，標籤選擇器和ID選擇器組合。由於這兩種組合方式的原理和效果一樣，所以只介紹標籤選擇器和類別選擇器的組合。組合選擇器只是一種組合形式，並不算是一種真正的選擇器，但在實際中經常使用。

例如 .orderlist li {xxxx} 或.tableset td {} 

我們使用的時候一般用在重複出現並且樣式相同的一些標籤裡，例如li td dd等。

例如<h1 class="red"></h1> H1.red {color: red} 

組合選擇器清單

1. A,B        多個元素選擇，同時配對所有A元素和B元素，A和B之間用逗號分隔    div,p { color:red; }

2. A B       後子元素選擇器，並符合所有屬於A元素後代的B元素，A和B之間用空格分隔     #nav li { display:inline;    li a { font-weight:bold; }

#3. 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.mypred

#{padding:10px;background-color:#ffffff;border:1px #000000 solid;color:red;}

</style>

## #####//html 代碼############<div class="mydivred"> div.mydivred</div>

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

試試看

#後位元素選擇器

#<style>

#<style>

#fuji .ziji

#{

## padding:10px;

background-color:#ffffff;

border:1px #000000 solid;color:red;
#}

<div id="fuji">##<div class ="ziji"> div.ziji</div>

</div>

#嘗試

子元素選擇器

#<style>

<style>

zys>span 

{

#################################################################################################### #############padding:10px;#########################background-color:#ffffff;## ######################border:1px #000000 solid;color:red;################# #######}#########################</style>############# ###########<div id="zys">########################<span class= "any"> div.ziji</span>#########################</div>

試試看

#相鄰元素選擇器

##<style>

##<style>

## div+p

{

background-color:yellow;

<div>

##試試看

#普通相鄰元素選擇器

div~p