當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

理解css相邻兄弟选择器

發布時間：2024/8/24 编程问答 39 如意码农

生活随笔收集整理的這篇文章主要介紹了理解css相邻兄弟选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

今天在菜鳥教程看到了css組合選擇符的“相鄰兄弟選擇器”，剛開始對這個概念有些不太理解，通過查閱資料并且經過一些試驗總算有了些頭緒。

原文解釋是“相鄰兄弟選擇器（Adjacent sibling selector）可選擇緊接在另一元素后的元素，且二者有相同父元素。如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。”

這里面有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標簽就可以一直套用這個“公式”。

如有錯誤，敬請指正，不吝賜教！

2018-05-19 23:26:10

總結

以上是生活随笔為你收集整理的理解css相邻兄弟选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

编程问答

理解css相邻兄弟选择器

總結