可以为双 CSS 类编写样式吗？ [复制]

Posted 2023-03-06

【中文标题】可以为双 CSS 类编写样式吗？ [复制]

【英文标题】：Can one write styles for double CSS classes? [duplicate]

【发布时间】：2014-04-15 21:56:04

【问题描述】：

考虑以下样式...

.fleft  float: left; margin-right: 15px; 

现在考虑这些 div：

<div class="fleft"></div>
<div class="fleft Shadow"><div style="position: relative; left: 15px;"></div></div>

文本被推向每个右侧 15 个像素。问题是第二个中的内部 div，通过绝对定位向右偏移 15 个像素。这会导致两个 div 和周围文本之间的边距为 0。

有没有办法为两个类编写样式？我尝试了这些，但它们不起作用：

.fleft .Shadow  margin-right: 30px; 

【参考方案1】：

是的

.fleft, .Shadow  margin-right: 30px; 

除非框架以某种方式控制它，否则消除空间不应修复它，例如，如果您查看 twitter bootstrap，它们会将类与空间连接起来，如下所示

.login-box .login-links  font-size: .7em 

见FIDDLE

【讨论】：

这完全不同：它适用于具有.fleft 或 .Shadow的元素。

他问的不是这个吗？ “有没有办法为两个类编写样式？”逗号分隔类，赋予类相同的属性 .fleft AND .Shadow

我在答案中添加了一个小提琴

这不是我的解释。而且我认为没有人需要问你提出的问题，因为有一个技术含量低但非常明显的解决方案：编写两次样式，每次使用不同的单类选择器。但也许 OP 可以澄清一下。

@LOTUSMS 他已经在他的 html 中声明了他在问题中发布的内容。他只是在询问是否有办法制作仅适用于具有 both 类的元素的 CSS 选择器。他绝对不希望选择器应用于只有类fleft 的元素。使用您的解决方案，它将适用于该元素。

【参考方案2】：

是的，只是不要在它们之间放置空格：

.fleft.Shadow  margin-right: 30px; 
      |
 Space removed

使用空格，您正在选择具有类Shadow 的元素，这些元素具有类fleft 的某些祖先。没有它，您将选择具有两个类的元素。

【讨论】：

请看下面我的小提琴，对不起，你错了。

除非您以某种方式对其进行编辑，否则我无法投票。这样做，我会投票赞成。你值得拥有