黑马程序员技术交流社区

标题: 【长沙校区】CSS选择器必备的3个知识点 [打印本页]

作者: 长沙-小知姐姐    时间: 2017-12-22 11:17
标题: 【长沙校区】CSS选择器必备的3个知识点
本帖最后由 长沙-小知姐姐 于 2017-12-22 11:20 编辑

今天给大家整理分享关于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%,平均...





作者: hz有盼头啊    时间: 2017-12-24 08:05
感谢分享

作者: 萝莉萌    时间: 2017-12-27 10:59
谢谢大大

作者: 孝宇兄    时间: 2017-12-29 20:43
感谢分享
作者: 长沙-小知姐姐    时间: 2018-3-20 16:07

作者: chaoyu    时间: 2018-3-20 19:58
66666666666666666666
作者: 蒲公英ff    时间: 2018-11-14 14:55
学习学习
作者: 番茄炒鸡蛋    时间: 2018-11-14 16:00
谢谢分享!~




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2