亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS 組合選擇器

組合選擇器

標(biāo)簽選擇器、類選擇器和ID選擇器是可以組合起來使用的。一般的組合方式是標(biāo)簽選擇器和類選擇器組合,標(biāo)簽選擇器和ID選擇器組合。由于這兩種組合方式的原理和效果一樣,所以只介紹標(biāo)簽選擇器和類選擇器的組合。組合選擇器只是一種組合形式,并不算是一種真正的選擇器,但在實(shí)際中經(jīng)常使用。?

比如 .orderlist li {xxxx} 或者 .tableset td {}?

我們使用的時(shí)候一般用在重復(fù)出現(xiàn)并且樣式相同的一些標(biāo)簽里,比如 li td dd等。?

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


組合選擇器列表

1.?A,B ? ? ? ?多個(gè)元素選擇,同時(shí)匹配所有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>

#fuji .ziji

{

padding:10px;

background-color:#ffffff;

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

}

</style>?

<div id="fuji">

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

</div>

嘗試一下


子元素選擇器

<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>

div+p

{

background-color:yellow;

}

</style>

<div>

<h2>My name is Donald</h2>

<p>I live in Duckburg.</p>

</div>

嘗試一下

普通相鄰元素選擇器

div~p

{

background-color: green;

}

<div>

<p>段落 1。 在 div 中。</p>

<p>段落 2。 在 div 中。</p>

</div>

<p>段落 3。不在 div 中。</p>

<p>段落 4。不在 div 中。</p>

嘗試一下

繼續(xù)學(xué)習(xí)
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>組合選擇器</title> <style type="text/css"> p span{ color:red } span { color:blue; } </style> </head> <body> <p>嵌套<span>用CSS</span>標(biāo)記的方法</p>嵌套之外的<span>標(biāo)記</span>不生效 </body> </html>
提交重置代碼