今天给大家整理分享关于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>

答案：

游客，如果您要查看本帖隐藏内容请回复

需要了解更多的学习资源可以加  小知QQ：2832281573   

                                                                      回个 贴，加个QQ，美滋滋！



【长沙校区班级活动贴】

长沙黑马“和尚庙”的放飞下山之路

相约尖山湖，放飞程序梦——记前端8期第一次班级活动

黑马相会忆古人，共度七夕看七期


【长沙校区最新就业信息贴】

JavaEE4期 毕业当天，就业率70.37%，平均薪水787...

前端5期 毕业54天, 就业率80.5%，就业29人 , 平均薪...

JavaEE3期毕业22天，就业率94.44%，平均薪水9029....

前端6期 毕业0个工作日，就业率69.36%，平均...

谢谢分享!~

学习学习

66666666666666666666

感谢分享

谢谢大大

感谢分享