码迷,mamicode.com
首页 > Web开发 > 详细

CSS选择器

时间:2018-08-12 15:38:01      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:组合   active   优先   继承   不同类   color   imp   分组   哪些   

CSS三大特性—— 继承、 优先级和层叠。

继承:即子类元素继承父类的样式;

优先级:是指不同类别样式的权重比较;

层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。

css选择符分类  

首先来看一下css选择符(css选择器)有哪些?


  1.标签选择器(如:body,div,p,ul,li)

  2.类选择器(如:class="head",class="head_logo")

  3.ID选择器(如:id="name",id="name_txt")

  4.全局选择器(如:*号)

  5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

  6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

  7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

  8.继承选择器(如:div p,注意两选择器用空格键分开)

  9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

  10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

  11.子选择器 (如:div>p ,带大于号>)

  12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

css优先级

当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。

不同级别

  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
  2. 作为style属性写在元素内的样式
  3. id选择器
  4. 类选择器
  5. 标签选择器
  6. 通配符选择器
  7. 浏览器自定义或继承

      总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

权重

!important      infinity

行间样式       1000

id           100

class |属性|伪类    10

标签|伪元素     1

通配符        0

 

权重是256进制


     

CSS选择器

标签:组合   active   优先   继承   不同类   color   imp   分组   哪些   

原文地址:https://www.cnblogs.com/guxia/p/9462827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!