css - ::selection 选择器使用遇到的问题

问题描述

问 题

问题：使用::selection选择器的时候，遇到了如下问题。

css代码

html代码

当我用鼠标选择这部分文字的时候，显示界面

当我把css代码改成 .main ::selection{ color: red } 后，选择全部文字，则会按照我希望的全红。这是为什么呐？我能感觉是样式层叠后有权重的大小问题，但是em不也是在p当中的嘛，有点没算明白这个权重，为什么em那部分优先呢？

解决方案

跟权重关系不大。
你用.main p::selection{ color: red }的时候，用的是包含选择符+类型选择符组合的方式，所以注定命中的就只能是.main里的<p>标签；而在换成.main ::selection{ color: red }以后，这就是个包含选择符，所以会命中.main里的所有子元素。

这篇关于css - ::selection 选择器使用遇到的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！