CSS總結篇之css組合選擇符
阿新 • • 發佈：2018-12-15
（一）後代選擇器
後代選擇器：先找到選擇器1，然後在選擇器1下面去查詢所有選擇器2，並設定屬性
（1）語法：選擇器1 選擇器2{ }
（2）注意點
- 後代選擇器必須使用空格隔開；
- 後代不僅僅包括兒子，還包括孫子，曾孫等等；
- 後代選擇器可以無限巢狀
（二）子選擇器
如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。
（1）語法格式：元素1>元素2{ }
例如：h1>strong{color:red}
（2）注意：
- 子元素選擇器只會選擇第一代選擇器,不會選擇被巢狀的其他標籤
- 子元素選擇器不僅僅可以使用標籤的名稱,還可以使用其他的選擇器(如id、class選擇器）
- 子選擇器可以無限巢狀
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0805_02相鄰的兄弟選擇器變形ul+ul</title> <style> h1>strong{color:red} </style> </head> <body> <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1> </body> </html>
（三）兄弟選擇器
1、相鄰兄弟選擇器：
（1）語法格式：元素1 + 元素2 { } 例如：h1+p{border:1px solid red;} （2）注意點：元素1和元素2必須有一個共同的父級元素，並且元素2緊在其同胞元素1後面.
例1、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>01相鄰兄弟選擇器</title> <style> div{ width: 500px; height: 500px; border:1px solid #000; margin:100px auto; text-align: center; } h1+p{ color:red; } /*只選中緊接著h1標籤相鄰的p標籤，並且h1標籤和p標籤擁有一個共同的父級div*/ </style> </head> <body> <div> <h1>h1標籤</h1> <p>第一個p標籤</p> <p>第二個p標籤</p> <p>第三個p標籤</p> <p>第四個p標籤</p> </div> </body> </html>
例2、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>
當然這個也會迴圈查詢，即當兩個兄弟元素相同時，會一次迴圈查詢：
例3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0805_02相鄰的兄弟選擇器變形ul+ul</title>
<style>
div{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid #000;
text-align: center;
}
ul+ul{
list-style:none;
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>第一個ul中的li</li>
<li>第一個ul中的li</li>
<li>第一個ul中的li</li>
</ul>
<ul>
<li>第二個ul中的li</li>
<li>第二個ul中的li</li>
<li>第二個ul中的li</li>
</ul>
<ul>
<li>第二個ul中的li</li>
<li>第二個ul中的li</li>
<li>第二個ul中的li</li>
</ul>
<ul>
<li>第二個ul中的li</li>
<li>第二個ul中的li</li>
<li>第二個ul中的li</li>
</ul>
</div>
</body>
</html>
可以看出第一個li字型顏色沒有變紅，第二個和第三個元素字型變紅，這就是因為第三個li是第二個li的兄弟元素，所以也會應用樣式。
例4、
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
不論是後代選擇器，子元素選擇器，相鄰兄弟選擇器還是普通兄弟選擇器，選擇的都是：最後面的（挨著花括號的）元素。
2、普通兄弟選擇器
普通兄弟選擇器:查詢某一個指定元素的後面的所有兄弟結點。
（1）語法格式：元素1 ~ 元素2{ }
例如：div~p { background-color：yellow；}
（2）注意：元素2必須跟（不一定緊跟）在其同胞元素1後面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
