选择具有class / id＆＃39; x＆＃39;的元素的所有伪元素

Question

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

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

这些方框中的每一个都有类galleryBlock，还有第二类 - 第二类是什么取决于方框比率，因为这些第二类的伪元素用于给方框一定比。

例如.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 */

但它不起作用。我怀疑我选择了错误的伪元素。我该如何做到这一点？

Answer 1

由于所有框都有类.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之间不应有任何空格，因为空格用作descendant combinator。

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

---

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

  

<强> 4. Selector syntax

     

选择器是由组合子分隔的一个或多个简单选择器序列的链。一   伪元素可以附加到简单的最后一个序列   选择器中的选择器。

     

简单的选择器是一种类型   选择器，通用选择器，属性选择器，类选择器，ID   选择器或伪类。

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