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

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

clipboard.png css代码

clipboard.png html代码

clipboard.png 当我用鼠标选择这部分文字的时候,显示界面

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

阅读 2.7k
1 个回答

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题