如何避免在 CSS 中重新定义父元素类答案

【问题标题】：How do I avoid redefining the parent element class in CSS如何避免在 CSS 中重新定义父元素类
【发布时间】：2012-01-27 06:49:01
【问题描述】：

我有一个类似于下面的 CSS 块，它定义了 element-a[ace] 的常用样式：

.element-a .element-aa, .element-a .element-ac, .element-a .element-ae {
     /* ... some styling */
}

是否有可能避免重新定义element-a 或更简洁的方式来一起完成所有工作。

【问题讨论】：

看看 Less 或 Sass——它们的存在正是为了这种情况。
我已经为更大的网络应用程序尝试过它们，但这是移动设备，并且正在寻找更轻更简单的东西。不过我明白你的意思，css 本身并没有真正鼓励干燥。
嗯，确实如此。这取决于你。也许您做错了，您可以为您的元素分配一个名为common-a 的共享类，并为该类定义公共CSS。例如，为什么你有所有这些课程？
CSS 本身无法在不为每个单独的选择器重复父规范的情况下重复父规范。有人可能会问您是否需要 CSS 规则中的父级。是否有没有 .element-a 父对象的 .element-aa 对象，您试图避免样式化？或者你可以在没有父类的情况下使用.element-aa, .element-ac etc...？
@jfriend00 我承认这有点奇怪，我使用它们的原因是因为我使用的是 jquery mobile 并且需要增加特异性以确保我的一些主题不会被忽略以支持框架 CSS 值。不过，确实有更好的方法。

【解决方案1】：

尝试以下.element-a div[class*='element-a']。上面的例子假设后代类应用在div中，当然你可以改成你用的任何东西。

演示： http://jsfiddle.net/yPBcR/1

【讨论】：

我猜这也能接受.element-a .element-ab?
class 属性中没有.，这是 CSS 符号而不是 HTML 符号。
@whatsthebeef 检查演示以更好地了解发生了什么。
虽然你已经回答了最初的问题，但我更感兴趣的是选择一些元素，即element-a[acd]，而忽略其他元素，例如.element-a .element-ab
@whatsthebeef 您可以使用 css3 :not() 选择器，但效率取决于您希望排除的元素数量和 Internet Explorer 的支持。这里是一个例子jsfiddle.net/yPBcR/2