zoukankan      html  css  js  c++  java
  • 关于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方面还是值得优化的。

  • 相关阅读:
    关于application/x-www-form-urlencoded编码
    socket 状态
    TCP/IP三次握手详解
    一步步优化JVM四:决定Java堆的大小以及内存占用
    编码问题
    git 应用
    父与子继承
    python try except
    python 编码问题
    requests 库使用方法
  • 原文地址:https://www.cnblogs.com/aotian/p/3532478.html
Copyright © 2011-2022 走看看