css那些事兒（2）選擇器

1.通配符 *

2.類選擇器

1 .myContent{
2     font-size:18px;
3 }

3.包含選擇器

1 p strong{
2     color:#000;
3 }

4.子選擇器

1 p>strong{
2     color:#000;
3 }

包含選擇器和子選擇器的區別在於包含選擇器是找p標籤下的全部後代strong，而子選擇器只是找子元素中的strong

5.相鄰選擇器

1 p+strong{
2     color:#000;
3 }

相鄰選擇器是匹配同一個父級下某個元素以後的元素。

6.屬性選擇器

E表示任何一個html標籤，能夠是通配符*

• E[attr]　　具備attr屬性的E標籤
• E[attr='value']　　具備attr屬性，且attr屬性值爲value的E標籤
• E[attr~='value]　　具備attr屬性，且屬性值是具備空格符號隔開的字段，其中一個字段等於value的E標籤
• E[attr|='value]　　具備attr屬性，且屬性值必須以value開始及使用連字符（-）分隔的E標籤

 1 *[class]{
 2     color: #DDD;
 3 }
 4 input[type='text']{
 5     text-align:center;
 6 }
 7 p[title~='css']{
 8     font-size:14px;
 9 }
10 p[title|='css']{
11     font-size:20px;
12 }

 

7.ID選擇器 

1 #myContent{
2     font-size:18px;
3 }

 8.選擇器組合

• p.myContent    類名爲myContent的p標籤
• p,.myContent,#title    3個選擇器並集
• p strong span