技術頻道導航
HTML/CSS
.NET技術
IIS技術
PHP技術
Js/JQuery
Photoshop
Fireworks
服務器技術
操作系統
網站運營

贊助商

分類目錄

贊助商

最新文章

搜索

CSS選擇器里不同的符號(+,> ,~和*) 用法實例

作者:admin    時間:2019-9-4 10:1:48    瀏覽:

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

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

空格符:

空格符是一個派生選擇器,它針對div容器里的所有p標簽元素。

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

execcodegetcode

> 符號:

> 符號針對的元素是特定元素的直接子元素。

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

執行結果

它針對的P元素是div容器的直接子元素,不能是子div的子元素。

execcodegetcode

+ 符號:

它是相鄰的兄弟組合。它結合了兩個具有相同父級的簡單選擇器序列,第二個選擇器必須緊跟在第一個選擇器之后。

div + p {
  color: green;
}

執行結果

它將只選擇前一個選擇器緊跟的第一個元素。在我們的示例中,它的目標僅為Second,因為主p元素剛好位于DIV標記之后。

execcodegetcode

~ 符號:

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

div ~ p{
  background-color:blue;
}

執行結果

execcodegetcode

* 符號:

* 符號是指所有子元素。

div *{
  background-color:blue;
}

執行結果

execcodegetcode

標簽: css  css3  
  • IT熱文
  • 站長推薦
{ganrao} 手机qq麻将官方版 乐乐安徽安庆麻将群 互联网推广 吉林心悦麻将双辽玩法 gpk捕鱼技巧打法下大分 湖南幸运赛车开桨结果 打麻将机技巧 管家婆精准三头中特 神来棋牌下载地址 2015欧冠决赛 手机网上兼职赚钱日 516棋牌游戏安卓 街机千炮捕鱼全部 国外问卷调查培训骗局 正宗天津麻将安卓下载 捕鱼大师ios官网