简短的回答是：没关系。
To elaborate on that: Say you would implement a browser1 and get to the part where you parse CSS. How would you do that? Well, there is a grammar https://www.w3.org/TR/css-syntax-3/ of CSS, so you use that to tokenize https://en.wikipedia.org/wiki/Tokenization_(lexical_analysis) the stylesheet, build an AST https://en.wikipedia.org/wiki/Abstract_syntax_tree and parse https://en.wikipedia.org/wiki/Parsing the stylesheet. This approach means that you would need to read everything2 before you can start to actually interpret the stylesheet. That is, apply the selectors to your DOM (also something you parsed, but from the HTML source instead of the CSS) and then apply the rules to elements matching those selectors. Note that everything we are doing so far is only modifying state of our data structures. We store on our elements what they should look like.
完成后，layout https://www.w3.org/TR/css-position-3/阶段就可以开始了（对于现代 CSS，这更加困难，这要归功于柔性盒 https://www.w3.org/TR/css-flexbox-1/ and grid https://www.w3.org/TR/css-grid-1/布局）。听起来很简单：计算每个元素在页面上的最终位置。事实并非如此，但假设我们是优秀的程序员，对我们需要遵守的规范有透彻的了解，所以我们可以做到这一点。我们需要知道什么？好吧，所有规则都适用于所有元素。就这么简单。我们无法计算布局然后从解析器中了解到“哦等等，我忘了，HTML 源代码开头的这个元素实际上是绝对定位 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Absolute_positioning，所以你应该重新开始你的定位”。因此，我们需要处理样式表中的所有内容。我们了解规则的顺序不要紧.
好像这还不够，我们的浏览器的下一阶段将是绘制所有内容，这又是不平凡的。您对构建自己的浏览器感到兴奋吗？ ????
如果您真的对主要浏览器如何实现所有这些感兴趣，您可以查看它们的引擎。我对那些根本不熟悉，但我知道它们……令人生畏。
So, 请注意 http://pirates.wikia.com/wiki/Pirates_Ye_Be_Warned_sign.
＆子弹;铬（Chromium）用途Blink https://en.wikipedia.org/wiki/Blink_(web_engine) (源代码 https://chromium.googlesource.com/chromium/blink/+/master，分叉自WebKit https://en.wikipedia.org/wiki/WebKit).
＆子弹;边缘用途EdgeHTML https://en.wikipedia.org/wiki/EdgeHTML（分叉自Trident https://en.wikipedia.org/wiki/Trident_(layout_engine)).
＆子弹;火狐使用Gecko https://en.wikipedia.org/wiki/Gecko_(software) (源代码 https://github.com/mozilla/gecko-dev），但正在开发一种名为Servo https://en.wikipedia.org/wiki/Servo_(layout_engine) (源代码 https://github.com/servo/servo).
＆子弹; Internet Explorer 使用Trident https://en.wikipedia.org/wiki/Trident_(layout_engine).
＆子弹;歌剧用途Blink https://en.wikipedia.org/wiki/Blink_(web_engine) (used Presto https://en.wikipedia.org/wiki/Presto_%28layout_engine%29歌剧 15 之前）。
＆子弹; Safari 使用WebKit https://en.wikipedia.org/wiki/WebKit (源代码 https://github.com/WebKit/webkit).
我尽可能多地包含源代码链接，但某些浏览器引擎是专有的。 Presto 的源代码不久前就被泄露了，但我不会在这里链接到它。你也许能找到它。
Disclaimer: I merely scratched the surface of building a browser. I haven't discussed interactivity, implementing a JavaScript engine, making HTTP requests, debugging tools, GUI design and implementation, et cetera.3 Building a browser is merely used to have a story in this answer. If you are actually interested in building a browser, consider these great resources4 don't. Rather, contribute to the development of your favorite browser, if it is open source!
想阅读更多内容吗？
＆子弹;这篇 Mozilla Hacks 文章 https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/对渲染引擎的大致工作原理有很好的解释。
它还包括漂亮的图画！
____________________
1 You don't want to do that. Seriously. It's a lot of work. But, say you would.
2 Except maybe if you would be willing to work with the AST while it is built. But that is hard and error prone. It also won't gain you much in the end, as we'll see later.
3 That is discussed in a little more detail in this Mozilla Hacks blog post https://hacks.mozilla.org/2017/05/quantum-up-close-what-is-a-browser-engine/.
4 There never were any, you don't need to check the revision history of this post. It's just a joke.
Sorry if you find it a lame one.
