• 关于CSS选择器的效率问题


    最近一段时间接触CSS比较多,所以从网上找了写资料,这里做下总结。

    以下是CSS选择器的效率排名:

    1. id选择器(#myid)
    2. 类选择器(.myclassname)
    3. 标签选择器(div,h1,p)
    4. 相邻选择器(h1+p)
    5. 子选择器(ul < li)
    6. 后代选择器(li a)
    7. 通配符选择器(*)
    8. 属性选择器(a[rel="external"])
    9. 伪类选择器(a:hover,li:nth-child)

    id和类名用于关键选择器上效率是最高的,而CSS3的仿伪类和属性选择器,虽然使用方便,但其效率却是最低的。

    以下是书写CSS的几点建议:

    1. 避免普遍规则
    2. 不要在ID选择器前加标签名或类名
    3. 不要在类名选择器前加标签名
    4. 尽可能使用具体的类别
    5. 避免使用后代选择器
    6. 标签分类规则中不应该包含一个子选择器
    7. 子选择器的问题
    8. 借助相关继承关系
    9. 使用范围内的样式表

    CSS的选择器是会影响一个网站的性能的,虽然对于大部分网站来讲影响不大,但是对于大流量的网站来讲还是有不小的影响的,所以为了打造高质量的网站,CSS方面还是值得优化的。

  • 相关阅读:
    第三章 系统总线
    人工神经网络及其应用
    专家系统
    遗传算法
    搜索算法策略
    js判断有无属性及新添属性
    vue 文件插件 Vetur 设置说明官网
    vue 获得当前无素并做相应处理
    VUE style 绑定
    vue入门基础知识点测试
  • 原文地址:https://www.cnblogs.com/aotian/p/3532478.html
Copyright © 2020-2023  润新知