2020-05-27 09:34发布
CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。假如 DOM 的结构如上图，e799bee5baa6e58685e5aeb931333363383938匹配规则是 .mod-nav h3 span。若从左向右的匹配，过程是：从 .mod-nav 开始，遍历子节点 header 和子节点 div，然后各自向子节点遍历。在右侧 div 的分支中，最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，假如有 1000 个 li，则这 1000 次的遍历与回溯会损失很多性能。再看看从右至左的匹配：先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3，由 h3再向上寻找 class=mod-nav 的节点，最后找到根元素 html 则结束这个分支的遍历。很明显，两种匹配规则的性能差别很大。之所以会差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。当然这是比较明显情况，如果在叶子上存在多个不符合条件的 span，从右向左的规则也会走一些弯路（这时就需要优化 CSS 选择器了）。但平均来说它还是更高效，因为大多时候，一个 DOM 树中，符合匹配条件的节点（如 .mod-nav h3 span）远少于不符合条件的节点。
css中有很多选择器，比如类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等，常见的选择器有id选择器、类选择器、标签选择器三大类。...
相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器
1、相邻兄弟选择器作用：匹配指定元素的相邻【下一个】兄弟元素语法：由 + 号来充当连接符，如 选择器1+选择器2
1. ！important 在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。 2. 行内样式，在style属性里面写的样式。 3. id选择器 4. class选择器 5. 标签选择器 6. 通配符选择器* 7. 浏览器的自...
ID选择器：#header {}类选择器：.header {}元素选择器：div {}子选择器：ul > li {}后代选择器：div p {}伪类选择器：a:hover {}属性选择器：input[type=text] {}
id选择器(#ID)在使用ID选择器之前需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个.号(.className)而id选择器是在名称前使用#如(#id),...
CSS哪些属性可以继承?css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom...
CSS主要的作用就是给网页中的dom元素设置样式，选择器则是用来匹配dom元素的。CSS中的选择器有三种，分别是标签选择器(根据元素标签名称)，类选择器(根据元素class属性)，id选择器(根据元素id属性)，并且三种选择器可以相互结合使用例如：body{background-col...
一、CSS选择器有哪些CSS中的选择器很多，比如：ID选择器，类选择器，通配符选择器，伪类选择器等等，接下来主要介绍常用的几个。1.标签选择器语法：标签名{}，eg：h1{}//为所有的h1元素设置样式。2.ID选择器语法：#id名{}//id值唯一不能重复,eg:#top{}//为id...
选择器 例子 例子描述element1~element2 p~ul 选择前面有 p元素的每个 ul元素。[attribute^=value] a[src^=https] 选择其 src 属性值以 https 开头的每个 元素。 [attribute$=value] a[src$=.pdf] 选择其 src 属性以 .pdf 结尾的所有 ...
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 py大白 的问题《浏览器是怎样解析CSS选择器的？》','http://www.shouhuola.com/q-14871.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
CSS 的后代选择器本身就是一种在标准里面不那么推荐的方式。
首先，对浏览器来说，ID 选择器 #xx 是最快的，其次是 class 选择器、html 元素选择器等。
假如 DOM 的结构如上图，e799bee5baa6e58685e5aeb931333363383938匹配规则是 .mod-nav h3 span。
若从左向右的匹配，过程是：从 .mod-nav 开始，遍历子节点 header 和子节点 div，然后各自向子节点遍历。在右侧 div 的分支中，最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，假如有 1000 个 li，则这 1000 次的遍历与回溯会损失很多性能。
再看看从右至左的匹配：先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3，由 h3再向上寻找 class=mod-nav 的节点，最后找到根元素 html 则结束这个分支的遍历。
很明显，两种匹配规则的性能差别很大。之所以会差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。
当然这是比较明显情况，如果在叶子上存在多个不符合条件的 span，从右向左的规则也会走一些弯路（这时就需要优化 CSS 选择器了）。但平均来说它还是更高效，因为大多时候，一个 DOM 树中，符合匹配条件的节点（如 .mod-nav h3 span）远少于不符合条件的节点。
相关问题推荐
css中有很多选择器，比如类别选择器、标签选择器、ID选择器、后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等，常见的选择器有id选择器、类选择器、标签选择器三大类。...
相邻兄弟选择器、通用兄弟选择器、属性选择器、伪类选择器、伪元素选择器
1、相邻兄弟选择器作用：匹配指定元素的相邻【下一个】兄弟元素语法：由 + 号来充当连接符，如 选择器1+选择器2
1. ！important 在属性后面写上这条样式，会覆盖掉页面上任何位置定义的元素的样式。 2. 行内样式，在style属性里面写的样式。 3. id选择器 4. class选择器 5. 标签选择器 6. 通配符选择器* 7. 浏览器的自...
ID选择器：#header {}类选择器：.header {}元素选择器：div {}子选择器：ul > li {}后代选择器：div p {}伪类选择器：a:hover {}属性选择器：input[type=text] {}
id选择器(#ID)在使用ID选择器之前需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个.号(.className)而id选择器是在名称前使用#如(#id),...
CSS哪些属性可以继承?css继承特性主要是指文本方面的继承，盒模型相关的属性基本没有继承特性。不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、top、bottom...
CSS主要的作用就是给网页中的dom元素设置样式，选择器则是用来匹配dom元素的。CSS中的选择器有三种，分别是标签选择器(根据元素标签名称)，类选择器(根据元素class属性)，id选择器(根据元素id属性)，并且三种选择器可以相互结合使用例如：body{background-col...
一、CSS选择器有哪些CSS中的选择器很多，比如：ID选择器，类选择器，通配符选择器，伪类选择器等等，接下来主要介绍常用的几个。1.标签选择器语法：标签名{}，eg：h1{}//为所有的h1元素设置样式。2.ID选择器语法：#id名{}//id值唯一不能重复,eg:#top{}//为id...
选择器 例子 例子描述element1~element2 p~ul 选择前面有 p元素的每个 ul元素。[attribute^=value] a[src^=https] 选择其 src 属性值以 https 开头的每个 元素。 [attribute$=value] a[src$=.pdf] 选择其 src 属性以 .pdf 结尾的所有 ...