css_day02_各種選擇器基本使用（相鄰兄弟選擇器+，兄弟選擇器~）
阿新 • • 發佈：2018-12-23
1.交集選擇器
格式：
選擇器1選擇器2{
} 效果：
2.並集選擇器
.
.
.
.
.
.
.
.
.
.
<———————————-華麗的分割線——————————->
今天是17年08月05日，因為之前的學習不是和紮實，導致現在工作遇到比較基礎的東西都花費了比較大的時間和精力。今天就來理解一下兄弟選擇器和類選擇器。
先直接看看官網：
3_1.相鄰兄弟選擇器：
(1)寫法：h1+p{border:1px solid red;}
(2)讀法：h1和p有一個共同的父級元素，選擇緊接著h1相鄰的p元素；
(3)注意點：兩個要有一個共同的父級元素，相鄰且下一個元素。
<!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 3_2.變形的相鄰兄弟選擇器：
(1)寫法：ul+ul{border:red;}
(2)讀法：兩個ul有相同的父級，選中緊接著ul相鄰的ul
(3)注意點：這個的注意點和h1+p的注意點一樣，但是還多了一個比較有趣的東西就是ul+ul，它有點像一個接著一個地迴圈遍歷，知道最後一個。
這個有點混，直接來個demo就容易理解了。
<!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>其實相鄰兄弟選擇器比較好用，要記住相鄰兄弟選擇器是選中什麼什麼標籤下的某一標籤（變形除外）所以，什麼什麼標籤是選不中的，也就是你所寫的+號的前一個標籤是選不中的。
4.兄弟選擇器：
(1)寫法：div~p
(2)作用：查詢某一個指定元素的後面的所有兄弟結點。
(3)注意點：選中div下的所有p，無論相不相鄰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0805_兄弟選擇器</title>
<style>
div{
width: 500px;
height: 500px;
border: 1px solid #000;
text-align: center;
margin: 200px auto;
}
span~p{
color: red;
}
</style>
</head>
<body>
<div>
<p>p標籤</p>
<span>span標籤</span>
<p>p標籤</p>
<span>span標籤</span>
<span>span標籤</span>
<p>p標籤</p>
</div>
</body>
</html>這個只是本人的學習筆記，有什麼不對或者不好的地方希望可以得到大家指正哦～