css关系css选择器有哪些大家帮我看看这一题的

根据兄弟元素来选择元素,例如,假設你希望只选择前面有一个<h1>元素的段落,可以使用下面这个css选择器有哪些

 <!-- 还可以根据兄弟元素来选择元素,例如,假设你希望只选择前面有一个<h1>え素的段落,可以使用下面这个css选择器有哪些 -->
 /* 先写前面的元素,再写一个'+'(加号),然后是兄弟元素 */
 /* 这里的就是: 这个css选择器有哪些会选择所有紧跟在┅个<h1>元素后面的段落 */

发布了82 篇原创文章 · 获赞 8 · 访问量 7万+

}

这里我们定义了所有class属性为father的元素下面的class属性为child的颜色为蓝色后代css选择器有哪些是一種很有用的css选择器有哪些,使用后代css选择器有哪些可以更加精确的定位元素

}

CSS 的后代css选择器有哪些本身就是一種在标准里面不那么推荐的方式

首先,对浏览器来说ID css选择器有哪些 #xx 是最快的,其次是 class css选择器有哪些、html 元素css选择器有哪些等


那为什么從右向左的规则要比从左向右的高效?

若从左向右的匹配过程是:从 .mod-nav 开始,遍历子节点 header 和子节点 div然后各自向子节点遍历。在右侧 div 的分支中最后遍历到叶子节点 a ,发现不符合规则需要回溯到 ul 节点,再遍历下一个 li-a假如有 1000 个 li,则这 1000 次的遍历与回溯会损失很多性能
再看看从右至左的匹配:先找到所有的最右节点 span,对于每一个 span向上寻找节点 h3,由 h3再向上寻找 class="mod-nav" 的节点最后找到根元素 html 则结束这个分支的遍历。
很明显两种匹配规则的性能差别很大。之所以会差别很大是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点);而从左向右的匹配规则的性能都浪费在了失败的查找上面。
当然这是比较明显情况如果在叶子上存在多个不符合条件的 span,从右向左的规则也会走一些弯路(这时就需要优化 CSS css选择器有哪些了)但平均来说它还是更高效,因为大多时候一个 DOM 树中,符合匹配條件的节点(如 .mod-nav h3 span)远少于不符合条件的节点

此段转载自: 经过编辑及排版。


但是后来人们发现这种方式很不符合人类自然的思考方式所以在建造 web 的时候更喜欢采用看起来比较有条理的更加像后端程序的层次结构方式命名,类似 #fuck .you a {...}

但是根据实践,大家发现这样基本是在 自high因为别人在改 CSS 的时候是不会去看你写的 CSS 的,都是直接浏览器定位到位于哪一行直接过去改代码块,反正一眼就能看懂

其实不用纠结這些,CSS 的解析时间跟 js 执行时间相比就像 PHP 代码的运行时间和数据库、I/O运行时间对比一样不是一个数量级,完全不用担心

}

我要回帖

更多关于 css选择器有哪些 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信