CSS选择器必备的3个知识点

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，否则很难通过。