【问题标题】:Are :before :after siblings?是 :before :after 兄弟姐妹吗?
【发布时间】:2017-11-14 15:10:47
【问题描述】:

问题的目的是调查以下行为的可能性:

.element:before {
  content: 'before';
  color: orange;
}

.element:after {
  content: 'after';
  color: green;
}

.element:after:hover + .element:before {
  color: red;
}
<div class='element'> </div>

【问题讨论】:

    标签: css css-selectors pseudo-element


    【解决方案1】:

    由于sibling combinators only represent element siblings,伪元素不能被兄弟组合子作为目标,而不是伪元素兄弟。

    因此,尽管::before::after 生成的框在布局上是彼此的兄弟,但就兄弟组合而言,它们不是。

    当元素的::before 伪元素悬停时,无法编写选择器样式化元素的::before 伪元素。 (就此而言,::after:hover 在 Selectors 4 之外也是无效的,并且不存在任何实现。)有 hacks 使用像 pointer-events 这样的东西,但不能保证在所有浏览器上都可以工作。

    【讨论】:

      猜你喜欢
      • 2019-05-06
      • 1970-01-01
      • 1970-01-01
      • 2019-08-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-03-06
      • 1970-01-01
      相关资源
      最近更新 更多