搜尋

首頁 >web前端 >前端問答 >'+”是什麼css選擇器

'+”是什麼css選擇器

青灯夜游
青灯夜游原創
2022-11-24 20:41:282727瀏覽

在css中，「」是相鄰兄弟元素選擇器，用於選擇緊接在另一元素後的元素，並且它們具備一個相同的父元素；換句話說，E和F兩元素具備一個相同的父元素，且F元素在E元素後面且相鄰，這樣就可使用相鄰兄弟元素選擇器來選擇F元素，語法「E F」。

'+”是什麼css選擇器

本教學操作環境：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表示選取了所有位於dc6dce4a544fdca2df29d5ac0ea9906b元素後的第一個e388a4556c0f65e1904146cc1a846bee 元素

上述「第零個段落」和「第一個段落」沒有被選中，是因為它們都嵌套在了dc6dce4a544fdca2df29d5ac0ea9906b標籤中，而不是標籤後面的元素；

“第二個段落”被選中，是因為這個e388a4556c0f65e1904146cc1a846bee標籤是dc6dce4a544fdca2df29d5ac0ea9906b標籤後的第一個e388a4556c0f65e1904146cc1a846bee元素，且有相同的父元素6c04bd5ca3fcae76e30b72ad730ca86d;

「第三個段落」和「第四個段落」沒被選中是因為它們不是dc6dce4a544fdca2df29d5ac0ea9906b標籤後緊鄰的e388a4556c0f65e1904146cc1a846bee標籤

假如希望"第三個段落"也被選中，則需要使它的e388a4556c0f65e1904146cc1a846bee標籤也在44a8922e6607b31d059827e4b04a93b9標籤之後緊鄰，如下

#如果e388a4556c0f65e1904146cc1a846bee標籤不是緊鄰dc6dce4a544fdca2df29d5ac0ea9906b，如下

可以看到「第二個段落」沒有被選中，因為相鄰兄弟選擇器選擇的是緊接在一個元素後的元素

div p{}表示的是選取dc6dce4a544fdca2df29d5ac0ea9906b後緊鄰的e388a4556c0f65e1904146cc1a846bee元素，但是上面程式碼div標籤後緊鄰的是45a2772a6b6107b401db3c9b82c049c2標籤，也就是它會選擇dc6dce4a544fdca2df29d5ac0ea9906b標籤後緊鄰的45a2772a6b6107b401db3c9b82c049c2標籤，e388a4556c0f65e1904146cc1a846bee標籤沒有緊鄰dc6dce4a544fdca2df29d5ac0ea9906b標籤，所以就選不到e388a4556c0f65e1904146cc1a846bee元素了

#範例②：

<!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{}，字面意思是選取所有位於25edfb22a4f469ecb59f1190150159c6 標籤後的第一個25edfb22a4f469ecb59f1190150159c6 元素

(1) 很顯然第一個25edfb22a4f469ecb59f1190150159c6標籤不會選中，因為它前面不是25edfb22a4f469ecb59f1190150159c6;

#(2) 第二個25edfb22a4f469ecb59f1190150159c6標籤會選中，因為它是第一個25edfb22a4f469ecb59f1190150159c6標籤緊鄰的25edfb22a4f469ecb59f1190150159c6標籤；

(3) 第三個25edfb22a4f469ecb59f1190150159c6標籤也會選取：因為第三個25edfb22a4f469ecb59f1190150159c6標籤的上一個標籤也是25edfb22a4f469ecb59f1190150159c6 標籤，也符合css選擇器li li{}的條件：25edfb22a4f469ecb59f1190150159c6標籤後的第一個

正因為css選擇器的樣式為li li{}，所以程式碼中的li標籤就可以一直套用這個「公式」。

（學習影片分享：css影片教學）

以上是'+”是什麼css選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：javascript如何將字串轉為數組下一篇：javascript如何將字串轉為數組

相關文章

看更多