css 知识点整理 01 选择器

基础理论-W3C-css

元素

选择器（优先级、选择器性能问题、结构和层叠）

单位和值

参考：
《CSS权威指南》（主要讲解了CSS2和CSS2.1）
MDN CSS Selectors
如何提升CSS选择器性能

元素

元素是html中最基本的构成要素。根据我自己的理解，元素可以从内容和显示进行分类

  • 内容：

    • 替换元素
      • 如img link
    • 不可替换元素
      • 绝大部分html元素都是不可替换元素

  • 显示：

    • 块级（block）
    • 行内（inline）

CSS2.1规定所有的元素都生成一个盒，即box model
盒子的具体形式由display决定

选择器

通配符选择器 *

可以选中页面中所有的元素 不推荐使用

标签选择器 tag

id选择器 #id

类选择器 .class

属性选择器 [attr]

  • 简单属性选择 a[attr]

  • 具体属性选择 a[attr = value]

  • 部分属性选择

    • * 任意子串匹配

    • ^ 以此开头

    • $ 以此结尾

    • ~ 选中在一组以空格分隔的字符串中，包含指定属性的元素

      [attr~=value]
      Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly “value”.

    • | 选中指定属性或者以指定属性加上-开头的元素

      [attr|=value]
      Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches.

伪类选择器 :link

  • 表示的是元素的一种状态
  • 常用的有
    • :link :visited :hover :active
    • :first-child :last-child :nth-child() :nth-last-child() :only-child
      • only-child the only child of its parent
    • :first-of-type :last-of-type :nth-of-type() :nth-last-of-type() :only-of-type
      • first-of-type the first sibling of its type in the list of children of its parent element父元素内有多个元素，选中每一类元素的第一个
    • :checked :focus
    • :enabled :disable

伪元素选择器 ::before

  • 常见的有

    • ::after
    • ::before
    • ::first-letter
    • ::first-line
    • ::selection

  • CSS3为了区分伪类和伪元素，所以用:和::进行区分。大部分浏览器两者都能分辨，低版本浏览器中IE8不能识别::

组合选择器

后代选择器

  • （空格） 选中所有符合条件的后代元素 children (not necessary direct children) of the former specified element.

  • > 只选中子元素，不选中后代元素 direct children of the former specified element.

邻接选择器

  • + 选中紧跟当前元素的兄弟元素（必须是紧跟） nodes that immediately follow the former specified element
  • ~ 选中当前元素的兄弟元素，不必紧跟 nodes that follow (not necessarily immediately) the former specified element, if both elements shared the same parent.


优先级/层叠

!important > 内联样式 > #id > .class :link [attr] > tag ::before > * > 继承

如果用数值来比较

  • id 0,1,0,0
  • 类，伪类，属性 0,0,1,0
  • 元素，伪元素 0,0,0,1
  • 通配符、组合选择器 0,0,0,0 （是0影响，不是毫无影响）
  • 继承样式可以被通配符覆盖

提升优先级

  • 后面的覆盖前面的
  • !important
  • 延长选择器长度，增加权重高的选择器


选择器性能

css选择器的解析

  • 参考了知乎回答和stack overflow回答

  • css选择器的解析是在DOM tree和style rules（css样式解析的结果）解析结束，二者需要结合生成Render tree时发生的

  • css选择器的解析顺序：从左到右

    • 因为DOM tree要在style rules中找到对应的DOM节点的样式，查询量很大
    • 如果从左到右执行，则需要在顶层父元素下依次查询，不匹配的话则要返回到最上层的父元素进行下一次查询，直到找到最右边的元素，效率低下
    • 从右到左执行，很快速的就可以排除不匹配的子节点，只对匹配的子节点做父元素验证，查询的次数大大减少
1
2
3
4
5
6
7
8
9
div.header a {
    color: red;
}
/*  遍历到所有的a元素，然后匹配其父元素中class类为header的div  */
.header .link {
    color:red
}
/*  遍历到.link元素，然后匹配其父元素中class类为header的元素  */

明显后面一种情况损耗更少

选择器最右边的一项称之为关键选择器，应当尽可能精确，避免不必要的遍历

提升性能

  • 避免使用通配符选择器

  • 避免使用标签来限制.class或者#id选择器

    1
    2
    3
    4
    5
    Bad
    div.header
    Good
    .header

  • 减少选择器长度，多使用继承

  • 避免使用多层标签选择器
  • 避免使用子选择器

值和单位

单位

length

相对单位

  • em 相对于从父元素中继承到的字体的大小 it represents the inherited font-size of the element

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    /* css  */
    body {font-size: 40px;}
    .parent1 {font-size : 20px;}
    .child1 {font-size: .8em;}
    .child2 {font-size: .8em;}
    .parent2 {font-size: 14px;}
    .child3 {font-size: .9em;}
    <!-- html -->
    hello world 40px
    <div class="parent1">
        hello world 20px
        <div class="child1">
            hello world 16px (20*0.8)
            <div class="child2">
                hello world 12.8px (20*0.8*0.8)
            </div>
            <div class="parent2">
                hello world 14px
                <div class="child3">
                    hello world 12.6px (14px*0.9)
                </div>
            </div>
        </div>
    </div>

  • ex 等于该元素中定义的font-family中x字母的高度 the x-height of the element’s font

  • ch Unicode字符中0的宽度 This unit represents the width, or more precisely the advance measure, of the glyph ‘0’ (zero, the Unicode character U+0030) in the element’s font
  • rem 根元素的字体大小 the font-size of the root element (e.g. the font-size of the element)

Viewport-percentage lengths
会根据视窗大小进行调整，MDN社区指出目前只有Gecko内核浏览器可以使用这几个单位
In conjunction with overflow:auto, space taken by eventual scrollbars is not substracted from the viewport, whereas in the case of overflow:scroll, it is.当overflow为auto时，视窗不会减去滚动条的宽度，但是设置了scroll的话视窗会减去滚动条宽度

  • vh viewport height 视窗高度的百分之一
  • vw viewport width 视窗宽度的百分之一
  • vmin 视窗宽高之间的最小值
  • vmax 视窗宽高之间的最大值

绝对单位

  • in 1英尺
  • px 1个物理像素点
  • pt 1点 （1/72个inch）
  • pc 12点
  • mm 毫米
  • cm 厘米

角度

  • deg 度
  • rad 弧度
  • grad 梯度

时间

  • ms 毫秒
  • s 秒

频率

  • Hz 赫兹
  • MHz 兆赫兹