读书笔记 – 高性能网站建设进阶指南(2)简化CSS选择符

css selectors 性能消耗从低到高:

  1. ID selectors
    #modal { overflow: hidden; }
  2. class selectors
    .container { margin: 0 atuo; }
  3. type selectors
    a { color: #999; }
  4. adjacent sibling selectors
    input + label { display: inline; }
  5. child selectors
    label > input { display: none; }
  6. descendant selectors
    .foo a { text-decoration: none; }
  7. universal selectors
    * { font-family: Arial; }
  8. Attribute Selectors
    [class^=”modal-“] { background: white; }
  9. Pseudo-Classes and Pseudo-Elements
    a:hover { text-decoration: none; }

Read More