Question

我有多个html元素。他们使用非常相似的CSS样式。唯一的区别是边框样式（一个元素除了左边框外都有，另一个元素除了右边等）。

到目前为止，我曾经创建了几种不同的样式，只有一行代码不同。这严重臃肿我的CSS文件。我的问题有更好的解决方案吗？我可以使用任何类型的继承吗？

Answer 1

有很多方法可以实现这一目标。

使用多个选择器：

selector #1, selector #2, selector #3 {
    /* common styles */
}
selector #1 { border-left: none; }
selector #2 { border-right: none; }
selector #3 { border-top: none; }

根据文档结构，您可以尝试以下内容：

<ul>
   <li>Element #1</li>
   <li>Element #2</li>
   <li>Element #3</li>
</ul>


ul li {
    /* common styles */
}
ul li:first-child { border-left: none; }
ul li:last-child { border-right: none; }

使用多个类：

<ul>
   <li class="border no-left">Element #1</li>
   <li class="border">Element #2</li>
   <li class="border no-right">Element #3</li>
</ul>


.border {
    /* common styles */
}
.border.no-left { border-left: none; }
.border.no-right { border-right: none; }

Answer 2

您可以声明具有多个类的元素

<div class="general-class left-border-class"></div>
<div class="general-class top-border-class"></div>
...

Answer 3

CSS

.border {
    border: solid #555 2px;
    width: 100px;
    height: 100px;
    }
    .border.left {
        border-width: 0 2px 0 0;
        }
    .border.right {
        border-width: 0 0 0 2px;
        }

HTML

<div class="border left"></div>
<div class="border"></div>
<div class="border right"></div>

Answer 4

在这个特殊场景中 - 你有不同边框样式的元素 - 你可以使用:first-child伪类。

现场演示： http://jsfiddle.net/7WJe9/1/

具有相似css的多个元素

4 个答案: