开发笔记📐 发现👽 人物👮 趣闻💦
主要CSS选择器分类介绍 CSS选择器的优先级详解

主要CSS选择器分类介绍 CSS选择器的优先级详解
2018-07-25 17:43:24   点击:

理解CSS选择器的优先级,就需要熟悉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有一套优先级的定义。

不同级别:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

同一级别:同一级别中后写的会覆盖先写的样式

比较难以理解的是当级别相当的时候:

HTML

<ul class="a">
<li class="b">GOGOGO</li>
</ul>

 CSS

//情形1
.a li{color:red}
ul .b{color:green}

//情形2
.a .b{color:red}
.a li{color:green}

//情形3
.a li{color:red}
ul li{color:green}

情形2是比较好理解的,显然结果为红色。

情形3与情形2也是一样的,前面优先级依旧高,结果同为红色。

情形1,上下的优先级是一样的,因此后面覆盖前面,结果为绿色。

前端 CSS 选择器

上一篇:clientHold:域名被clientHold和serverHold怎么办
下一篇:国内环境下Laravel下Voyager的加载、运行速度优化过程记录