大家好,我是小雨小雨,致力于分享有趣的、实用的技术文章。

内容分为翻译和原创,如果有问题,欢迎随时评论或私信,希望和大家一起进步。

大家的支持是我创作的动力。

选择器的优先级

众所周知,选择器是有权重的,优先级从低到高,如下所示:

  • 类型选择器(例如,h1)和伪元素(例如,::before)
  • 类选择器 (例如,.example),属性选择器(例如,[type="radio"])和伪类(例如,:hover)
  • ID 选择器(例如,#example)
  • !important 此声明将覆盖任何其他声明,不建议使用,除非以下几种情况:
  1. 覆盖内联样式
  2. 覆盖优先级绝对高的选择器

选择器解析

虽然我们平常写css选择器是从左到右书写的:

根节点 .子节点 .孙节点{

}

但是,这只不过是为了方便使用者书写,真正的解析顺序是反过来的,也就是从子节点搜索到根节点,原因很简单,因为查找次数将大大影响效率。一个个来说

由于css tree是树结构,如果从根节点开始,那么就是类似深度优先遍历的查找方式,一图辟千言:

如果到最后一个子节点仍然找不到的话,就是回到之前的父节点,继续查找其他的子节点,其实看起来也没毛病哈,那我们来个对比,看下css为什么选择从左到右解析。

一样的图,换了个解析方向:

很明显的差别就是,我们的判断条件提前了,先判断孙节点是否匹配,只有匹配才会继续深入,否则直接跳过,然后这就从多个多条线(深度优先遍历)变成了多个单条线的问题,有点类似于从O(n2) => O(n)的意思,大大提高了元素匹配效率。

大白话解释就是: 从右到左解析比从左到右解析减少了查找失败的次数和深度

还有一点就是公共样式,对于公共样式,其实就是多个相同的样式,从子节点到根节点是完全相同的,也就是一条线即可

书写高效css选择器

  • 优先就是避免使用通配符匹配,这样css从右到左的解析就白搭了,莫得用处了。就和从左到右一样一样的了。
  • 之前提到的选择器优先级ID选择器是最高的,但这仅仅限于单独用ID选择器,如果你和其他选择器混合使用的话,就发挥不到id选择器的唯一高效性了。为什么呢?因为从右到左解析呀,比如 #box .text,会先进行类选择器的查找,最后才是ID选择器,所以ID选择器就显的没那么重要了。
  • 尽量少使用标签结束,因为这会让浏览器查找很多个子节点,然后才能确定是否匹配,比如:.box a,只要有a标签就会进行查找,但是其实我们只想给.box上的a设置样式,我们可以给个更具体的类选择器:.box .href,这样就能匹配更少的元素啦
  • 还有就是经常说的避免选择器超过三个,比如 .div1 .div2 .div3 .p .a 就可以优化为 .div1 .a,为啥这样说的,因为查找中也有条件进行判断啊我们提供了一个子节点.a,并且是在.div1下的其实就够了,他会沿着一条线查找,知道跟节点,咱写这么多选择器只会徒增判断条件,没卵用。。
  • 还有就是尽量写得具体,可以使用>操作符等等
  • 选择器上能缩写的命名就尽量缩写、相同父层级的选择器合并,都可以适当减少css体积。
  • 使用CSS BEM书写规范
  • 欢迎补充

最后

这次分享内容就到这了,比较短小,哈哈。

打算做完rollup之后,重拾基础了,毕竟一切都是从根本一点点码起来的,只有底子厚了,才能厚积薄发。

面试官:说说你对css效率的理解的更多相关文章

  1. 面试官又整新活,居然问我for循环用i++和++i哪个效率高?

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 前几天,一个小伙伴告诉我,他在面试的时候被面试官问了这么一个问题: 在for循环中,到底应该用 i++ 还是 ++i ? 听到这,我感觉这面试官 ...

  2. 【MySQL】面试官:如何添加新数据库到MySQL主从复制环境?

    写在前面 今天,一名读者反馈说:自己出去面试,被面试官一顿虐啊!为什么呢?因为这名读者面试的是某大厂的研发工程师,偏技术型的.所以,在面试过程中,面试官比较偏向于问技术型的问题.不过,技术终归还是要服 ...

  3. 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  4. 我已经说了5种css居中实现的方式了,面试官竟然说还不够?

    这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说.今天就来总结一下这些居中的方式 使用flex布局设置居中. 使用f ...

  5. 面试官:自己搭建过vue开发环境吗?

    开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...

  6. 【我给面试官画饼】Python自动化测试面试题精讲

    那今天给家分享的是一个面试主题. 就比如说我们的自动化测试,自动化如何去应对面试官,和面试官去聊一聊自动化的心得,自动化你现在去面试的时候是一个非常重要的一个关键点,所以如果你在这方面有一定的心得.那 ...

  7. 对线面试官,凭借nginx能一战封神吗?

    面试官:小伙子,你对nginx熟悉吗? 我:当然熟悉了,请听我慢慢道来. 心里想,我能吊打面试官吗?今天非得灭一灭面试官的威风,平时都被怼的狗血淋头. 面试官:就你那点花花肠子,咱还不清楚. 我:.. ...

  8. Android开发面试经——6.常见面试官提问Android题②(更新中...)

    版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http://blog.csdn.net/fi ...

  9. 书评<<剑指offer 名企面试官精讲典型编程题>>

      前前后后阅读了一周, 感慨很多, 面试考察的是一个人的综合能力, 这一点从面试官的角度去解读, 确实对面试的理解更立体. *) 具体考察的点1) 扎实的基础2) 高质量的代码3) 清晰的思路4) ...

随机推荐

  1. Heartbeat(注意iptables和selinux的问题)

    安装 yum –y install heartbeat libnet配置 通过yum安装配置文件目录/etc/ha.d目录下没有配置文件需要从doc目录中复制三个文件.ha.cf.authkeys.h ...

  2. POJ 3041 Asteroids 二分图之最大匹配

    题意:在一个网格中有若干个点,每一次可以清除一行或者一列,问最少几次可以将网格中的点全部清除. 思路:这个题是一个入门的最大匹配题(这个好像不是思路..).一般的方式就是将 行 看作集合A,列 看作集 ...

  3. http概述——http笔记一

    之前想深入的了解学习下HTTP,所以就买了本砖头<HTTP权威指南>.最近一直在看,可是发现看书只有输入并没有输出,不行.所以就打算把自己的理解写成一系列的笔记,供以后翻阅. 大概画了张本 ...

  4. Docker深入浅出系列 | Docker Compose多容器实战

    目录 前期准备 Docker Compose是什么 为什么要用Docker Compose Docker Compose使用场景 Docker Compose安装 Compose Yaml文件结构 C ...

  5. Asp.net Core MVC(四)

    上一篇说的是asp.net mvc核心UseMvc的过程,末尾想捋一下asp.net核心的路由流转过程,现在看来还是要准备下一个代码,熟悉了代码,那么整个流转过程就通了〜 不多说,今儿先看下,Rout ...

  6. 7-4 jmu-python-判断是否构成三角形 (10 分)

    7-4 jmu-python-判断是否构成三角形 (10 分)   输入三角形的三边,判断是否能构成三角形.若能构成输出yes,否则输出no. 输入格式: 在一行中直接输入3个整数,3个整数之间各用一 ...

  7. 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...

  8. 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)

    Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...

  9. 37个JavaScript基本面试问题和解答

    1.使用typeof bar ==="object"来确定bar是否是一个对象时有什么潜在的缺陷?这个陷阱如何避免? 尽管typeof bar ==="object&qu ...

  10. JAVA基础之IO流知识总结

    一.IO流体系图 IO常用的几个流: [I/O流原理作用] Input/Output:输入输出机制 输入机制:允许java程序获取外部设备的数据(磁盘,光盘,网络等). 输出机制:保留java程序中的 ...