03-高級選擇器

高級選擇器分爲：

• 後代選擇器

• 子代選擇器

• 並集選擇器

• 交集選擇器

後代選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

1 .container p{
2     color: red;        
3 }
4 .container .item p{
5     color: yellow;
6 }

View Code

 

子代選擇器

使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

1 .container>p{
2     color: yellowgreen;
3 }

View Code

 

並集選擇器

多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器

1 /*並集選擇器*/
2 h3,a{
3     color: #008000;
4     text-decoration: none;
5                 
6 }

View Code

好比像百度首頁使用並集選擇器。

 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/

View Code

 

交集選擇器

使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 語法：div.active

好比有一個<h4 class='active'></h4>這樣的標籤。

那麼

 1 h4{
 2     width: 100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集選擇器 */
10 h4.active{
11     background: #00BFFF;
12 }

View Code

它表示二者選中以後元素共有的特性。