Daily-Question icon indicating copy to clipboard operation
Daily-Question copied to clipboard

Published 20 hours ago • verified publisher icon shfshanyue

【Q315】'+' 与 '~' 选择器有什么不同

Open shfshanyue opened this issue 4 years ago • 2 comments

shfshanyue avatar Jun 04 '20 11:06 shfshanyue

  • + 选择器匹配紧邻的兄弟元素
  • ~ 选择器匹配随后的所有兄弟元素

shfshanyue avatar Jun 09 '20 14:06 shfshanyue

~ + 选择器不同之处

~ 是匹配元素之后的选择器

+ 是匹配相邻元素选择器

<div>我是div</div>
    <p>我是p</p>
    <p>我是p</p>
    <div>我是div</div>
    <p>我是p</p>
    <div>
        <p>我是div下面的p</p>
        <p>我是div下面的p</p>
    </div>
    <span>我是span</span>


<style>
    div+p {
        color: red;
    }

    /* 第一个p标签变红色了 */

    div~p{
        color:red;
    }

    /* div后面的p标签都变成红色了 */
</style>

QC2168 avatar May 23 '22 14:05 QC2168

div后相邻的p标签文字都会变红，而不是只有第一个p标签变红

Psycho-Monster avatar Jan 30 '23 13:01 Psycho-Monster 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>title</title>
    <style>
      /* + 选择器选取紧接着的相邻连续兄弟元素 */
      .d1 p + p {
        color: red;
      }

      /* ~ 选择器选取后面所有的同级兄弟元素 */
      .d2 p ~ p {
        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <div class="d1">
      <p>第一个段落</p>
      <p>第二个段落</p>
      <p>第二个段落</p>
      <span>span</span>
      <p>第三个段落</p>
    </div>
    <br />
    <div class="d2">
      <p>第一个段落</p>
      <p>第二个段落</p>
      <span>span</span>
      <p>第三个段落</p>
    </div>
  </body>
</html>

image "+" 选择器匹配紧邻的连续兄弟元素，这样描述更准确

yxw007 avatar Mar 22 '23 06:03 yxw007