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>