有没有办法在 CSS 中拥有多个 :before 和 :after 伪元素？

Question

目前我有这个标记，它代表一个图标容器和其中一些使用 CSS 样式的元素，最终显示为图形图标。

    <div class="icon">
        <div class="icon-element1"></div>
        <div class="icon-element2"></div>
        <div class="icon-element3"></div>
    </div>

子元素的数量可以根据图标的复杂程度而有所不同。

我想要的是以某种方式尽可能多地移动到 CSS 样式表，因此理想情况下我将只有 <div class="icon"></div>，其余的将仅从 CSS 样式呈现，在概念上与 :before/:after 很接近，一种虚拟 div。我不想使用 JavaScript 动态添加元素。如果我们有多个:before/:after，就可以做到这一点。

这是我使用上面的标记获得的图标示例：

如您所见，共有 3 个子元素，分别代表灰盒、白屏和绿松石按钮。

请告知，我可以如何简化此标记，以便不必在每次显示此图标时都放置所有 div。

Answer 1

如果您在<div class="icon"> 上设置position:relative，并且绝对定位伪元素，您实际上可以只使用::before 和::after 来实现图像中的图标：

http://jsfiddle.net/RMs2L/3/

.icon {
    position: relative;
    width: 160px;
    height: 160px;
    background: #666;
}

.icon::before,
.icon::after {
    content: '';
    position: absolute;
    width: 120px;
    left: 20px;
}

.icon::before {
    height: 80px;
    top: 20px;
    background: #fff;
}

.icon::after {
    height: 20px;
    bottom: 20px;
    background: #00b9ae;
}

（未在 IE 中测试。）

但你说得对，对于超过三个部分的图标，::before 和 ::after 不会削减它。

如果您的图标仅由纯色（或渐变）区域组成，那么多个渐变背景可能适用于具有更多元素的图标：

http://jsfiddle.net/RMs2L/5/

.icon {
    position: relative;
    width: 160px;
    height: 160px;
    background-color: #666;
    background-image: linear-gradient(to bottom, #fff 0%, #fff 100%)
                    , linear-gradient(to bottom, #00b9ae 0%, #00b9ae 100%)
                    , linear-gradient(to bottom, #000 0%, #000 100%);
    background-size: 120px 40px
                   , 120px 20px
                   , 120px 20px;
    background-position: 20px 20px
                       , 20px 80px
                       , 20px 120px;
    background-repeat: no-repeat;
}

你甚至可以用一个渐变背景做同样的事情，使用锐利的渐变边界：

http://jsfiddle.net/RMs2L/6/

background-image: linear-gradient(to bottom, 
                  #fff 0px, #fff 40px,
                  rgba(0,0,0,0) 40px, rgba(0,0,0,0) 60px,
                  #00b9ae 60px, #00b9ae 80px,
                  rgba(0,0,0,0) 80px, rgba(0,0,0,0) 100px,
                  #000 100px, #000 120px);
background-size: 120px 120px;
background-position: 20px 20px;

当然，您可以使用实际的背景图像文件以及渐变或代替渐变。

如您所见，如果您尝试使用渐变背景制作图标，那么 CSS 会比设置实际元素或伪元素的样式要复杂得多。如果您将其吸收并放入 HTML 元素，并按照其他地方的建议使用:nth-child 设置它们的样式，它可能会使代码更清晰。

Answer 2

你可以使用nth-child()。

.icon:nth-child(2) {
    color:red;
}

在这种情况下，选择器将有效地设置.icon 的第二个孩子的样式。

您不需要多余的 .icon-element 类。

我知道您说过子元素的数量会有所不同，但是，除了减少标记之外，此方法与您当前使用的方法之间没有任何区别 - 这正是您想要的。

此外，还有adjacent sibling selector +也可以有效使用。