css中“+”是什么

發(fā)布時(shí)間：2022-11-25 09:36:47 來源：億速云閱讀：230 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“css中“+”是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在css中，“+”是相鄰兄弟元素選擇器，用于選擇緊接在另外一元素后的元素，并且它們具備一個(gè)相同的父元素；換句話說，E和F兩元素具備一個(gè)相同的父元素，并且F元素在E元素后面且相鄰，這樣就可使用相鄰兄弟元素選擇器來選擇F元素，語法“E + F”。

相鄰兄弟元素選擇器(E + F)

相鄰兄弟選擇器能夠選擇緊接在另外一元素后的元素，并且他們具備一個(gè)相同的父元素，換句話說，EF兩元素具備一個(gè)相同的父元素，并且Ｆ元素在Ｅ元素后面，并且相鄰，這樣咱們就可使用相鄰兄弟元素選擇器來選擇Ｆ元素。

這里面有2個(gè)關(guān)鍵信息：（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>第零個(gè)段落</p>
          <div>
              <p>第一個(gè)段落</p>
          </div>
      </div>
      <p>第二個(gè)段落</p>
      <p>第三個(gè)段落</p>
      <p>第四個(gè)段落</p>
    </body>
</html>

css中“+”是什么

div+p表示選取了所有位于 <div> 元素后的第一個(gè) <p> 元素

上述“第零個(gè)段落”和“第一個(gè)段落”沒有被選中，是因?yàn)樗鼈兌记短自诹?lt;div>標(biāo)簽中，而不是標(biāo)簽后面的元素；
“第二個(gè)段落”被選中，是因?yàn)檫@個(gè)<p>標(biāo)簽是<div>標(biāo)簽后的第一個(gè)<p>元素，且有相同的父元素<body>；
“第三個(gè)段落”和“第四個(gè)段落”沒被選中是因?yàn)樗鼈儾皇?lt;div>標(biāo)簽后緊鄰的<p>標(biāo)簽

假如希望"第三個(gè)段落"也被選中，則需要使它的<p>標(biāo)簽也在<div>標(biāo)簽之后緊鄰，如下

css中“+”是什么

如果<p>標(biāo)簽不是緊鄰<div>，如下

css中“+”是什么

可以看到“第二個(gè)段落”沒有被選中，因?yàn)橄噜徯值苓x擇器選擇的是緊接在一個(gè)元素后的元素
div+p{}表示的是選取<div>后緊鄰的<p>元素，但是上面代碼div標(biāo)簽后緊鄰的是<span>標(biāo)簽，也就是它會(huì)選擇<div>標(biāo)簽后緊鄰的<span>標(biāo)簽，<p>標(biāo)簽沒有緊鄰<div>標(biāo)簽，所以就選不到<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>

css中“+”是什么

一開始特別納悶為啥“List item 2”和“List item 3”都被選中了~~~

首先分析選擇器樣式：li+li{}，字面意思是選取所有位于 <li> 標(biāo)簽后的第一個(gè) <li> 元素

(1) 很顯然第一個(gè)<li>標(biāo)簽不會(huì)選中，因?yàn)樗懊娌皇?lt;li>；
(2) 第二個(gè)<li>標(biāo)簽會(huì)選中，因?yàn)樗堑谝粋€(gè)<li>標(biāo)簽緊鄰的<li>標(biāo)簽；
(3) 第三個(gè)<li>標(biāo)簽也會(huì)選中：因?yàn)榈谌齻€(gè)<li>標(biāo)簽的上一個(gè)標(biāo)簽也是<li> 標(biāo)簽，也滿足css選擇器li+li{}的條件：<li>標(biāo)簽后的第一個(gè)<li>元素
正因?yàn)閏ss選擇器的樣式為li+li{}，所以代碼中的li標(biāo)簽就可以一直套用這個(gè)“公式”。

“css中“+”是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

css中“+”是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽