CSS selectors ul li a {…} vs ul > li > a {…}

前端未结

关注

 6  1311

6条回答

暗喜 (楼主)

2020-12-08 03:32

ul > li > a selects only the direct children. In this case only the first level of the first level
inside the
- -s in the unordered list
  
  Example of ul > li
  ul > li.bg { background: red; }
  
  affected affected NOT affected NOT affected
  if you'd be using ul li - ALL of the li-s would be affected
  
  UPDATE The order of more to less efficient CSS selectors goes thus:
  - ID, e.g.#header
  - Class, e.g. .promo
  - Type, e.g. div
  - Adjacent sibling, e.g. h2 + p
  - Child, e.g. li > ul
  - Descendant, e.g. ul a
  - Universal, i.e. *
  - Attribute, e.g. [type="text"]
  - Pseudo-classes/-elements, e.g. a:hover
  So your better bet is to use the children selector instead of just descendant. However the difference on a regular page (without tens of thousands elements to go through) might be absolutely negligible.