Html 从另一个css类继承

我这里有一个问题，我似乎不明白，直到现在我的css已经有点草率，它一直是一个黑客的情况下，直到它看起来是正确的，但我已经决定学习它正确的，我试图分类的东西，因为我可以

所以我有一个布局，有一个无序列表，这个列表有三个li标记，每个li标记中有两个div

现在我为这些容器中的每一个都有了一个类，它们可以称为container_1 container_2，依此类推

现在他们每个人都有一些独特的属性，但他们也都遵循一套风格。例如，每个li中的div是并排的，所以它的两个div集也都有圆角

所以我想我可以创建一个圆角加上左、右浮动的类，这样我就不用重新键入代码来圆角或浮动了，我可以引用类似这样的类：

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

但是当我用这个的时候，我放松了我的风格，所以我用了一个逗号，这就允许了麦粒肿；我在等待跳水员回来，但是弯角和浮标都没用

那么我在这方面哪里出了问题

这是我的代码，我已经删除了破坏布局的代码，但是如果删除注释，您可以看到发生了什么

命名有点不同，但你会知道这是什么意思

---

谢谢。

您可以使用如下CSS代码：

.container_1 {

}
.rounded_corners {

}
.float_left {

}

然后按以下方式将类设置为HTML元素：

<div class="container_1 rounded_corners float_left">...</div>

。。。

因此DIV元素将继承每个类的每个样式！

---

显然，DIV这只是一个例子，你可以使用每个标签

CSS类无法继承，所以您需要做的是将它们拆分为尽可能多的原子类。例如，如果您有圆角类，并且它可能适用于容器：

.rounded-corners
{
   /* Your CSS to define rounded corners */
}

请注意，您仅定义圆角的特性。现在假设您有一个类来设置容器的样式（例如，使用适当的填充）：

如何将它们结合在一起？这不会在CSS中完成，而是在HTML中完成，在本例中，此

继承自

容器

和

圆角

：

<div class="container rounded-corners">
</div>

---

如果我理解得很好，您希望对每个div应用一组类吗

我会这样把它拆开：

css

在html中

<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>

---

等等。

所以我没有办法将圆角类与css表中的容器类一起使用？没有更整洁的方法，因为在html的class属性中放入多个类看起来非常混乱，而且总是被告知要尽可能地使事情变得清晰明了。您可以将“圆角”属性放入“container”类中，如果您的所有容器都具有此属性仅供将来参考：不建议使用基于外观的类名。基于事物所代表的类名称更好。@RyanKinal感谢提示好友，这些名称目前只是用于测试目的，通常我对命名非常严格（这是我对haha非常严格的一件事）。我明白了，我想我正在努力改变我对类的思维方式，我习惯于使用OO语言。就最后一点而言，你是说使用一个名为rounded_corners的类是不好的，因为它不能解释类是什么，我最终只使用class=“rounded_corners”？也许像market_card_boder_风格这样的东西可以解释更多。@ragebunny不，这不是因为它的意思。试着回答：例如，如果cellpadding属性被认为是邪恶的（因为您在HTML中混合了内容和样式），那么为什么圆角应该更好呢？你也可以用HTML写一些关于外观的东西。“container”是好的（你说它是一个container，你不会问它应该如何呈现）。我添加了一个关于LESS的小例子，看看它。非常感谢这个答案，它确实帮助了我！我会少看一眼。再次感谢。

<div class="rounded-corners">
</div>

.rounded-corners
{
    /* Your CSS here */
}

.float-left
{
    /* Your CSS here */
}

.container
{
    .rounder-corners
    .float-left
}

.rounded_corners {}
.float_left {}
.float_right {}
.container {}

<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>