We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS（cascade style sheet ) 中文即层叠样式表，它的核心即通过层叠来处理样式的冲突。那么何为层叠？层叠的机制是：为规则赋予不同的重要程度。最重要的是作者样式表，即开发者所写样式；其次是用户样式表，用户可以通过浏览器的设置为网页应用自己的样式；最后是浏览器的默认样式表。但使用！important放在属性声明后面可以覆盖任何规则。层叠机制的重要性高到低如下：
在这基础上，规则再按选择符的特殊性排序，特殊性高的覆盖特殊性低的样式，如果两条规则的特殊性相等，则后定义的优先。
任何选择符的特殊性都对应以下4个级别，即a,b,c,d：
根据以上规则可以计算出任意选择符的特殊性：
这边的累加规则是基于位置累加的，不是普通的十进制加分。这避免高特殊性选择符被一堆低特殊性选择符的累加值覆盖。对于通用选择符（*），它的特殊性性为0 但比继承的特殊性高。
样式的声明与引入通常有以下三种方法：
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); .Mycss{ .... } </style> </head> </html>
通常下，开发者还是建议多用link 慎用@import 。link属于HTML标签，功能更加强大，而@import只能导入样式表。而且加载页面，link标签引入CSS是同时加载，而@import是在页面加载结束后再加载CSS。样式的声明次序就是它在HTML源代码中出现的次序，要特别注意后声明的样式容易覆盖先前声明的样式。
对于下面这条规则，选择器是从左边先查找还是右边呢？
.admin h3 span {font-size: 16em;}
答案是先右边查找，先查找span标签。事实上，CSS选择器的读取顺序是：从右往左。先找到所有span 沿span的父元素查找h3，查找到的结果就加入结果集直到根元素不再匹配。一开始就筛掉一大堆不匹配的节点。如果从左到右查找，那么对于不匹配的节点大量回溯会对性能造成极大的浪费。
我们先看下面的代码，你觉得三个p标签的样式是什么？其中 h2 ~ p是选择h2标签同辈的p标签，那么显然3个p标签都是匹配规则的，但真实的渲染结果又是什么样的呢？
<header> <p>哈哈啊哈哈哈哈</p> <h2>haha</h2> <p>哈哈啊哈哈哈哈</p> <p>哈哈啊哈哈哈哈</p> </header> h2 ~ p{ font-weight: bold; color: red; }
真实的渲染结果：
第一个p标签并没有被选中，那又是为什么呢？其实是浏览器不支持向前渲染，通常情况下，浏览器会按照元素在页面中出现的先后次序给它们应用样式。在给h2前面的P标签应用样式时，h2还不存在，所以不会匹配样式。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
CSS如何渲染样式 ？
层叠机制
CSS（cascade style sheet ) 中文即层叠样式表，它的核心即通过层叠来处理样式的冲突。那么何为层叠？层叠的机制是：为规则赋予不同的重要程度。最重要的是作者样式表，即开发者所写样式；其次是用户样式表，用户可以通过浏览器的设置为网页应用自己的样式；最后是浏览器的默认样式表。但使用！important放在属性声明后面可以覆盖任何规则。层叠机制的重要性高到低如下：
在这基础上，规则再按选择符的特殊性排序，特殊性高的覆盖特殊性低的样式，如果两条规则的特殊性相等，则后定义的优先。
特殊性
任何选择符的特殊性都对应以下4个级别，即a,b,c,d：
根据以上规则可以计算出任意选择符的特殊性：
这边的累加规则是基于位置累加的，不是普通的十进制加分。这避免高特殊性选择符被一堆低特殊性选择符的累加值覆盖。对于通用选择符（*），它的特殊性性为0 但比继承的特殊性高。
样式的引入
样式的声明与引入通常有以下三种方法：
通常下，开发者还是建议多用link 慎用@import 。link属于HTML标签，功能更加强大，而@import只能导入样式表。而且加载页面，link标签引入CSS是同时加载，而@import是在页面加载结束后再加载CSS。样式的声明次序就是它在HTML源代码中出现的次序，要特别注意后声明的样式容易覆盖先前声明的样式。
选择器匹配顺序
对于下面这条规则，选择器是从左边先查找还是右边呢？
答案是先右边查找，先查找span标签。事实上，CSS选择器的读取顺序是：从右往左。先找到所有span 沿span的父元素查找h3，查找到的结果就加入结果集直到根元素不再匹配。一开始就筛掉一大堆不匹配的节点。如果从左到右查找，那么对于不匹配的节点大量回溯会对性能造成极大的浪费。
同辈选择符的匹配问题
我们先看下面的代码，你觉得三个p标签的样式是什么？其中 h2 ~ p是选择h2标签同辈的p标签，那么显然3个p标签都是匹配规则的，但真实的渲染结果又是什么样的呢？
真实的渲染结果：
第一个p标签并没有被选中，那又是为什么呢？其实是浏览器不支持向前渲染，通常情况下，浏览器会按照元素在页面中出现的先后次序给它们应用样式。在给h2前面的P标签应用样式时，h2还不存在，所以不会匹配样式。
The text was updated successfully, but these errors were encountered: