「+」是什麼css選擇器
在css中，「+」是相鄰兄弟元素選擇器，用於選擇緊接在另外一元素後的元素，並且它們具備一個相同的父元素；換句話說，E和F兩元素具備一個相同的父元素，並且F元素在E元素後面且相鄰，這樣就可使用相鄰兄弟元素選擇器來選擇F元素，語法「E + F」。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
相鄰兄弟元素選擇器(E + F)
相鄰兄弟選擇器能夠選擇緊接在另外一元素後的元素，並且他們具備一個相同的父元素，換句話說，EF兩元素具備一個相同的父元素，並且Ｆ元素在Ｅ元素後面，並且相鄰，這樣咱們就可使用相鄰兄弟元素選擇器來選擇Ｆ元素。
這裡面有2個關鍵資訊：（1）緊接在另一元素後；（2）二者有相同父元素
例子①：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div+p{
background-color: aqua;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div>
<p>第零個段落</p>
<div>
<p>第一個段落</p>
</div>
</div>
<p>第二個段落</p>
<p>第三個段落</p>
<p>第四個段落</p>
</body>
</html>登入後複製
div+p表示選取了所有位於 <div> 元素後的第一個 <p> 元素
上述「第零個段落」和「第一個段落」沒有被選中，是因為它們都巢狀在了<div>標籤中，而不是標籤後面的元素；
「第二個段落」被選中，是因為這個<p>標籤是<div>標籤後的第一個<p>元素，且有相同的父元素<body>；
「第三個段落」和「第四個段落」沒被選中是因為它們不是<div>標籤後緊鄰的<p>標籤
假如希望"第三個段落"也被選中，則需要使它的<p>標籤也在<div>標籤之後緊鄰，如下
如果<p>標籤不是緊鄰<div>，如下
可以看到「第二個段落」沒有被選中，因為相鄰兄弟選擇器選擇的是緊接在一個元素後的元素
div+p{}表示的是選取<div>後緊鄰的<p>元素，但是上面程式碼div標籤後緊鄰的是<span>標籤，也就是它會選擇<div>標籤後緊鄰的<span>標籤，<p>標籤沒有緊鄰<div>標籤，所以就選不到<p>元素了
例子②：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
li+li{
background-color: aqua;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<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>
</body>
</html>登入後複製
一開始特別納悶為啥「List item 2」和「List item 3」都被選中了~~~
首先分析選擇器樣式：li+li{}，字面意思是選取所有位於 <li> 標籤後的第一個 <li> 元素
(1) 很顯然第一個<li>標籤不會選中，因為它前面不是<li>；
(2) 第二個<li>標籤會選中，因為它是第一個<li>標籤緊鄰的<li>標籤；
(3) 第三個<li>標籤也會選中：因為第三個<li>標籤的上一個標籤也是<li> 標籤，也滿足css選擇器li+li{}的條件：<li>標籤後的第一個<li>元素
正因為css選擇器的樣式為li+li{}，所以程式碼中的li標籤就可以一直套用這個「公式」。
（學習視訊分享：）
以上就是「+」是什麼css選擇器的詳細內容，更多請關注TW511.COM其它相關文章！
