笔记申明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时刻开的一个专栏，
天天10分钟，重构你的前端学问系统，笔者重要整顿进修历程的一些要点笔记以及感悟，完全的可以到场winter的专栏进修【原文有winter的语音】，若有侵权请联络我，邮箱：kaimo313@foxmail.com。

一、归纳综合

本文重要聊聊浏览器是怎样把
CSS 划定规矩应用到节点上，并给这棵质朴的
DOM 树添加上
CSS 属性的。

二、CSS构建历程

构建 DOM 的历程是：从父到子，从先到后，一个一个节点组织，而且挂载到 DOM 树上的，那末这个历程当中，顺次拿到上一步组织好的元素，去搜检它婚配到了哪些划定规矩，再依据划定规矩的优先级，做掩盖和调解。

2.1、挑选器

• 空格: 子女，选中它的子节点和一切子节点的子女节点
• >: 子代，选中它的子节点
• +：直接后继挑选器，选中它的下一个相邻节点
• ~：后继，选中它以后一切的相邻节点
• ||：列，选中表格中的一列

挑选器有个特性，那就是挑选器的涌现递次，一定跟构建 DOM 树的递次一致。这是一个 CSS 设想的准绳，即保证挑选器在 DOM 树构建到当前节点时，已可以正确推断是不是婚配，不须要后续节点信息。

接下来看一下操作历程。

三、操作历程

起首，须把
CSS 划定规矩举行处置惩罚。作为一门言语，
CSS 须要先经由词法剖析和语法剖析，变成计算机可以明白的构造。将其笼统成一棵可用的笼统语法树。

一个 compound-selector 是搜检一个元素的划定规矩，而一个复合型挑选器，则是由数个 compound-selector 经由过程前面讲的标记连接起来的。

3.1、子女挑选器 “空格”

子女挑选器的作用局限是父节点的一切子节点，因而划定规矩是在婚配到本标签的完毕标签时回退。

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

当婚配 a#b 的元素时，才会最先搜检它一切的子代是不是婚配 .cls。

退却的状况：

<a id=b>
    <span>1<span>
    <span class=cls>2<span>
</a>
<span class=cls>3<span>

这段代码里有 cls 类的有有两个 span 标签，所以为了防备第三个 span 才不会被选中，当碰到 </a> 时，必需使得划定规矩 a#b .cls 回退一步。

3.2、后继挑选器“ ~ ”

.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 选中了span2，它的后继应当是 span3，span4是span3的子节点不该被选中， span5是后继应当被选中。

从上面我们可以得出一个结论：后继节点和当前节点父元素相同是充足必要前提。

3.3、子代挑选器 “>”

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>

当 DOM 树组织到 div 时，婚配了 CSS 划定规矩的第一段，激活背面的 .cls 挑选前提，而且指定父元素必需是当前 div。因而span2就会被选中。

3.4、直接后继挑选器 “+”

直接后继挑选器只对唯一一个元素见效，不须要像前面几种一样重复激活和封闭划定规矩。

3.5、列挑选器 “ || ”

列挑选器比较迥殊，它是特地针对表格的挑选器。

3.6、其他

3.6.1、逗号分开

/* 这里用,离隔，可以看成两条划定规矩处置惩罚 */
a#b, .cls {

}

a#b {

}
.cls {

}

3.6.2、挑选器重合

可以运用树形构造来举行一些兼并，来进步效力。

#a .cls {

}
#a span {

}
#a>span {

}

上面挑选器可以构建成一棵树

• a

  • < 空格 >.cls
  • < 空格 >span
  • >span

个人总结

之前进修css的时刻没有想过是什么完成的，只知道怎样用，如许写能完成结果就好了，进修winter专栏以后，熟悉更深了，有些题目直接实质可能对你会影响更大。