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
posted @ 2014-04-25 19:16  蚂蚁远征  阅读(128)  评论(0)  编辑  收藏  举报