Question

这是html的简化版

<div id="id1"></div>
<div id="id2"></div>

这是我的CSS。

#id1 {
    display: -ms-flexbox;
    -ms-flex-direction: row;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

#id2 {
    display: -ms-flexbox;
    -ms-flex-direction: column;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

两种样式之间的唯一区别是-ms-flex-direction是行与列。所有其他3个属性是相同的。是否有将这两者结合起来以便不重复相同的代码？

Answer 1

在这种情况下，您可以将常用样式应用于两个div，然后使用您的ID进行区别（对于此BTW，类更好）

div {
    display: -ms-flexbox;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

#id1 {
    -ms-flex-direction: row;
}

#id2 {
    -ms-flex-direction: column;
}

这是更好的

<强> HTML

<div class="flexbox row"></div>
<div class="flexbox column"></div>

<强> CSS

.flexbox {
    display: -ms-flexbox;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

.flexbox.row{
    -ms-flex-direction: row;
}

.flexbox.column {
    -ms-flex-direction: column;
}

Answer 2

当元素之间共享属性时，您应该使用类来定位它们。 ID应仅作为唯一标识符在单个元素上。以下是如何实现类：

<div id="id1" class="same"></div>
<div id="id2" class="same"></div>

CSS：

.same {
    display: -ms-flexbox;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

#id1 {
    -ms-flex-direction: row;
}

#id2 {
    -ms-flex-direction: column;
}

您还可以使用空格为元素指定多个类。所以这个：

<div id="id1" class="same different"></div>
<div id="id2" class="same not-different"></div>
<div id="id3" class="same not-different"></div>

CSS：

.same {
    display: -ms-flexbox;
    width: 100px;
    height: 200px;
    border: 1px solid;
}

.different {
    background: green;
}

.not-different {
    background: red;
}

#id1 {
    -ms-flex-direction: row;
}

#id2 {
    -ms-flex-direction: column;
}

这将允许您使用类链接定位多个项目。

是否可以组合常见样式并删除重复

2 个答案: