03-高級選擇器

高級選擇器分為：

• 后代選擇器

• 子代選擇器

• 並集選擇器

• 交集選擇器

后代選擇器

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

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

 

子代選擇器

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

.container>p{
    color: yellowgreen;
}

 

並集選擇器

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

/*並集選擇器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

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

 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
   }
/*使用此並集選擇器選中頁面中所有的標簽，頁面布局的時候會使用*/

 

交集選擇器

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

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

那么

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
    background: #00BFFF;
}

它表示兩者選中之后元素共有的特性。