1.常用的CSS选择器

1.1 标签选择器，用html标签申明，如：

/*标签选择器*/
   p{
     color: red;
   }

1.2 类选择器，用一个样式类名申明，如：

  /*类选择器*/  .content{     color: red;  }

1.3 id 选择器，用 DOM 的 id 申明，如：

  /*id选择器*/  #content{    color: red;  }

1.4 属性选择器，用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，如：

   <div title="content">this is content</div>   <style>     /*属性选择器*/     [title=content]{         color: red;     }   </style>

除了前 3 种基本选择器，还有一些扩展选择器，最常用的有：

1.5 后代选择器，利用空格间隔，比如：

  <div>     <p>后代选择器</p>  </div>

  <style>     /*后代选择器*/     div p{         color: red;     }  </style>

1.6 群组选择器，利用逗号间隔，比如：

  <div>群组选择器</div>  <span>群组选择器</span>  <p>群组选择器</p>

  <style>     /*群组选择器*/     div,span,p{         color: red;     }  </style>

当然还有很多其他的选择器，包括子元素选择器，相邻兄弟选择器等等。

2.优先级

基本原则： 一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

计算方法： 我们用 1 表示标签选择器的优先级，用 10 表示类选择器的优先级，用 100 标示 ID 选择器的优先级

  #content  .para   p    /*优先级值：100+10+1 = 111*/

   div#content   p        /*优先级值：1+100+1 = 102*/

   div.content   p        /*优先级值：1+10+1 = 12*/

   div   p                /*优先级值：1+1 = 2*/

3.定义顺序

看下列代码，请问<div>标签内的文字是什么颜色的？

  <style>     .red{       color: red;     }     .blue{       color: blue;     }  </style>  <div class="blue red">请问字体是什么颜色？</div>

答案：蓝色。因为最终的显示效果跟样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，也就是.blue定义在.red后面，会将其颜色覆盖，与在class中的使用先后顺序无关。

热门文章

原创教程

原创教程：《ECMAScript 6 教程》

附加习题：《ECMAScript 6 教程》测试题

原创教程：《Vue2.0基础教程》

原创教程：《Vue2.0进阶教程》

附加习题：《Vue2.0基础教程》测试题

趣味职场

职场感悟：混口饭吃，谈不上喜欢

感到迷茫：我很努力，但依然很迷茫

薪资待遇：那么点工资，能招到人吗？

培训出身：我是一个培训出身的程序员

搞笑黑话：互联网公司黑话，搞笑到爆

职业自由：程序员职业自由的6个阶段

职场形象：在别人眼里，程序员是这样的

免费资源

其实学好技术并不难，架构师免费分享全网全套最新web前端、JavaScript、HTML5、PHP、数据库……等视频资料！

[总价值超3万！]年薪35万以上的大牛几乎都看了！

加微信: lyn10180919 免费领取，由于领取的朋友比较多，所以加微信时一定要备注：7，否则很难通过。