1

目前我有这个标记，它代表一个图标容器和一些在其中使用 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 样式，其余的只是从 CSS 样式中呈现，在概念上类似于:before/:after一种虚拟 div。我不想使用 JavaScript 动态添加元素。如果我们有多个:before/:after.

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

图标

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

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

4

2 回答 2

2

你可以使用nth-child().

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

在这种情况下，选择器将有效地设置.icon.

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

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

此外，还有可以有效使用的相邻兄弟选择器。+

于 2013-10-23T21:58:40.390 回答
1

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

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按照其他地方的建议使用 设置样式，它可能会使代码更清晰。

于 2013-10-23T22:21:43.210 回答