1. 程式人生 > >CSS快速入門-組合選擇器

CSS快速入門-組合選擇器

空間 組合選擇器 lin -s css 註意 color 選擇器 AD

<div class="gradefather"> hello1
  <div class="father">hello2
    <p class="son">hello4</p>
  </div>
  <p>hello3</p>
  <p>hello5</p>
</div>

一、A,B :任意選擇器 A or B

div,p {    #所有div或者p標簽
font-size:10px;
color:blue;
}

二、A B:後代選擇器,A 標簽下的所有B

div p { #div下所有p標簽
font-size:20px;
color:green;
}

三、A>B:子選擇器,僅僅兒子級別會選中.

gradefather>p {#gradefather的子標簽,僅hello3 hello5 會作用
font-size:20px;
color:red;
}
.father>p {#father的子標簽,僅hello4 會作用
font-size:20px;
color:red;
}

四、A+B:毗鄰選擇器,僅僅相鄰的同級別(兄弟sibling)第一個會選中.

father+p { #father的第一個鄰居,僅僅hello3會作用
font-size:20px; color:green; }

註意:
1、塊級元素可以包含內聯元素或某些塊級元素,但內聯元素不能包含塊級元素,它只能包含其它內聯元素。塊級標簽默認占一行,內聯標簽占內容大小的空間。
2、有幾個特殊的塊級元素只能包含內聯元素,不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
3、li內可以包含div
4、塊級元素與塊級元素並列、內聯元素與內聯元素並列。

CSS快速入門-組合選擇器