• CSS选择器优化


    首先我们要知道,CSS选择器的解析是从右往左的,例如

    div p a .box

    首先查找的是页面中class为box的元素,再分别查找为a的元素、为p的元素。。。

    关键选择器:

    因此最重要的就是最右边的选择器,称为关键选择器

    css选择器的效率排序:

    内联样式 > ID选择器 > 类选择器 > 标签选择器 > 相邻选择器 > 子选择器 > 后代选择器 > 通配符选择器 > 属性选择器 > 伪类选择器

    从以上可以看出,ID选择器和类选择器的效率最高,而属性选择器和伪类选择器虽然很好用,但是效率最低

    CSS选择器优化

    • 尽量使用具体的ID和类选择器
    • 不要在ID选择器前加标签名
    • 不要在类选择器前加标签名
    • 避免使用后代、子代选择器
    • 避免使用通配符选择器
    • 将多层标签选择器改为类选择器,减少查找时间
    • 避免单规则的属性选择器
    • 避免类正则的属性选择器
    • 删除无用的选择器
  • 相关阅读:
    子网划分详解
    USACO range
    USACO shopping
    USACO fence
    USACO Spinning Wheels
    USACO butter
    USACO msquare
    USACO Feed Ratios
    USACO Stringsobits
    USACO Factorials
  • 原文地址:https://www.cnblogs.com/ashen1999/p/12809532.html
Copyright © 2020-2023  润新知