zoukankan      html  css  js  c++  java
  • 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优先级

      CSS优先级:是由四个级别和各级别的出现次数决定的。

      四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符。

      优先级的算法:

      每个规则对应一个初始"四位数":0、0、0、0

      若是 行内选择符,则加1、0、0、0

      若是 ID选择符,则加0、1、0、0

      若是 类选择符/属性选择符/伪类选择符,则分别加0、0、1、0

      若是 元素选择符/伪元素选择符,则分别加0、0、0、1

      算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。

      需注意的:

      ①、!important的优先级是最高的,但出现冲突时则需比较”四位数“;

      ②、优先级相同时,则采用就近原则,选择最后出现的样式;

      ③、继承得来的属性,其优先级最低;

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

      *css选择器使用强烈建议采用低权重原则,利于充分发挥css的继承性,复用性,模块化、组件化。

  • 相关阅读:
    nginx 添加模块
    zabbix监控nginx status页面
    查看crontab执行记录
    mysql常见问题处理
    iftop简单使用
    TCP的状态及变迁
    CF1174F
    luoguP6326 Shopping
    【THUWC2020】工资分配
    CF1336简要题解
  • 原文地址:https://www.cnblogs.com/leena/p/6929495.html
Copyright © 2011-2022 走看看