卡卡網(wǎng)

本文介紹如何使用CSS選擇器里不同的符號(hào)(+,> 和 ~) 以及它們的區(qū)別，在開始之前，讓我們拿一段示例代碼來認(rèn)識(shí)這些符號(hào)。

<div id="container">
  <p>First</p>
  <div>
    <p>Child Paragraph</p>
  </div>
  <p>Second</p>
  <p>Third</p>
</div>

空格符：

空格符是一個(gè)派生選擇器，它針對(duì)div容器里的所有p標(biāo)簽元素。

div#container p{
  font-weight:bold;
}

execcodegetcode

> 符號(hào)：

> 符號(hào)針對(duì)的元素是特定元素的直接子元素。

div#container > p {
  border: 1px solid black;
}

執(zhí)行結(jié)果

它針對(duì)的P元素是div容器的直接子元素，不能是子div的子元素。

execcodegetcode

+ 符號(hào)：

它是相鄰的兄弟組合。它結(jié)合了兩個(gè)具有相同父級(jí)的簡(jiǎn)單選擇器序列，第二個(gè)選擇器必須緊跟在第一個(gè)選擇器之后。

div + p {
  color: green;
}

執(zhí)行結(jié)果

它將只選擇前一個(gè)選擇器緊跟的第一個(gè)元素。在我們的示例中，它的目標(biāo)僅為Second，因?yàn)橹?code>p元素剛好位于DIV標(biāo)記之后。

execcodegetcode

~ 符號(hào)：

它是一般的兄弟組合器，類似于相鄰的兄弟組合器。區(qū)別在于，第二個(gè)選擇器不必緊跟第一個(gè)選擇器，這意味著它將選擇第一個(gè)選擇器后面的所有元素。

div ~ p{
  background-color:blue;
}

執(zhí)行結(jié)果

execcodegetcode

* 符號(hào)：

* 符號(hào)是指所有子元素。

div *{
  background-color:blue;
}

執(zhí)行結(jié)果

execcodegetcode

標(biāo)簽: css  css3