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