重学前端-总结：12 、浏览器：一个浏览器是如何工作的（阶段三）

悠悠 2021-09-28 05:42 255阅读 0赞

# 重学前端-总结：12 、浏览器：一个浏览器是如何工作的（阶段三） #

### 文章目录 ###

*  重学前端-总结：12 、浏览器：一个浏览器是如何工作的（阶段三）
 *   *  后代选择器 “空格”
     *  后继选择器“ ~ ”
     *  子代选择器“ >”
     *  直接后继选择器“ +”
     *  列选择器“ || ”
     *  其它

*  实际上，CSS 规则是并不是等DOM 树构建好了以后，再进行选择并给它添加样式的。
 *  所谓的选择器，应该被理解成“匹配器”才更合适。

CSS 选择器的各种符号:

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>空格</td> 
   <td>后代</td> 
   <td>选中它的子节点和所有子节点的后代节点。</td> 
  </tr> 
  <tr> 
   <td>&gt;</td> 
   <td>子代</td> 
   <td>选中它的子节点</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>直接后继选择器</td> 
   <td>选中它的下一个相邻节点</td> 
  </tr> 
  <tr> 
   <td>~</td> 
   <td>后继</td> 
   <td>选中它之后所有的相邻节点</td> 
  </tr> 
  <tr> 
   <td>||</td> 
   <td>列</td> 
   <td>选中表格中的一列</td> 
  </tr> 
 </tbody> 
</table>

*   空格: 后代，选中它的子节点和所有子节点的后代节点。
    *   >: 子代，选中它的子节点。
    *   +：直接后继选择器，选中它的下一个相邻节点。
    *   ~：后继，选中它之后所有的相邻节点。
    *   ||：列，选中表格中的一列。

**选择器特点：**

那就是选择器的出现顺序，必定跟构建 DOM 树的顺序一致。这是一个 CSS 设计的原则，即保证选择器在 DOM 树构建到当前节点时，已经可以准确判断是否匹配，不需要后续节点信息。

## 后代选择器 “空格” ##

我们先来分析一下后代选择器，我们来一起看一个例子：

a#b .cls {     width: 100px;}

可以把一个 CSS 选择器按照 compound-selector 来拆成数段，每当满足一段条件的时候，就前进一段。

比如，在上面的例子中，当我们找到了匹配 a\#b 的元素时，我们才会开始检查它所有的子代是否匹配 .cls。

除了前进一段的情况，我们还需要处理后退的情况，比如，我们这样一段代码：

当遇到 时，必须使得规则 a\#b .cls 回退一步，这样第三个 span 才不会被选中。后代选择器的作用范围是父节点的所有子节点，因此规则是在匹配到本标签的结束标签时回退。

## 后继选择器“ ~ ” ##

接下来我们看下后继选择器，跟后代选择器不同的地方是，后继选择器只作用于一层，我们来看一个例子：

.cls~* {
        border:solid 1px green;
    }
    <div>
    <span>1<span>
    <span class=cls>2<span>
    <span>
        3
        <span>4</span>
    <span>
    <span>5</span>
    </div>

这里 .cls 选中了 span 2 然后 span 3 是它的后继，但是 span 3 的子节点 span 4 并不应该被选中，而 span 5 也是它的后继，因此应该被选中。

按照 DOM 树的构造顺序，4 在 3 和 5 中间，我们就没有办法像前面讲的后代选择器一样通过激活或者关闭规则来实现匹配。

但是这里有个非常方便的思路，就是给选择器的激活，带上一个条件：父元素。

注意，这里后继选择器，当前半段的 .cls 匹配成功时，后续 \* 所匹配的所有元素的父元素都已经确定了（后继节点和当前节点父元素相同是充分必要条件）。在我们的例子中，那个 div 就是后继节点的父元素。

## 子代选择器“ >” ##

div>.cls {
        border:solid 1px green;
    }
    <div>
    <span>1<span>
    <span class=cls>2<span>
    <span>
        3
        <span>4</span>
    <span>
    <span>5</span>
    </div>

## 直接后继选择器“ +” ##

直接后继选择器的实现是上述中最为简单的了，因为它只对唯一一个元素生效，所以不需要像前面几种一样反复激活和关闭规则。

## 列选择器“ || ” ##

列选择器比较特别，它是专门针对表格的选择器，跟表格的模型建立相关.

## 其它 ##

CSS 选择器还支持逗号分隔，表示“或”的关系。

比如

a#b, .cls {  }

我们当作两条规则来处理：

a#b {  }
    
        .cls {  }

还有一个情况，就是选择器可能有重合，这样，我们可以使用树形结构来进行一些合并，来提高效率：

#a .cls {  } #a span {  }#a>span {  }

这里实际上可以把选择器构造成一棵树：

*   #a
        *   < 空格 >.cls
        *   < 空格 >span
        *   >span

需要注意的是，这里的树，必须要带上连接符。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/7576e7a7a201430d978de6e6a4f41d39.png