选择带有class/id 'x'的元素的所有伪元素

Question

我正在寻找一种方法来 select 具有 class galleryBlock 的元素的所有伪元素，以及一种方法 select具有特定 id 的元素的所有伪元素。

我的代码是这样设置的：多个框的网格全部互锁，一些跨越多列，一些跨越多行。

这些盒子中的每一个都有 class galleryBlock，以及第二个 class — 第二个 class 取决于盒子的比例，因为这第二个 classes 的伪元素用于给盒子一定的比例。

例如 .square 有一个由 :after 定义的伪元素来给那个盒子一个平方比，等等

我希望能够在将鼠标悬停在任何 .galleryBlock 上时将其不透明度转换为 0.5。我还希望能够单独设置每个伪元素的颜色——每个伪元素的颜色不同。

这是我正在尝试的代码：

.galleryBlock:hover *:after {
    opacity:0.5
}
.galleryBlock *:after {
    transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
}
#one *:after {
    background: linear-gradient(red, blue);
}
#two *:after {
    background: linear-gradient(green, yellow);
}
/* etc, etc */

但它不起作用。我怀疑我 select 把伪元素弄错了。我该如何实现？

Answer 1

由于所有框都有 class .galleryBlock — 它们有或没有特定 ID — ::after 伪元素可以按如下方式匹配：

.galleryBlock:after {
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

在 :hover 状态：

.galleryBlock:hover:after {
    opacity: 0.5;
}

在这种情况下，simple selectors because white-space is used as descendant combinator.

之间不应有任何空格

换句话说，通过使用 .galleryBlock:hover :after，浏览器尝试在悬停时匹配具有 .galleryBlock class 的元素后代的每个 ::after 伪元素状态。当我们正在寻找 .galleryBlock 本身的 ::after 伪元素时。

另请注意，在CSS选择器的末尾只能添加一个伪元素：

4. Selector syntax

A selector is a chain of one or more sequences of simple selectors separated by combinators. One pseudo-element may be appended to the last sequence of simple selectors in a selector.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

因此，选择器应该像：.galleryBlock:hover:after，而不是.galleryBlock:after:hover。

选择带有class/id 'x'的元素的所有伪元素

Selecting all pseudo elements of elements with class/id 'x'

css

css-selectors

pseudo-element