Question

例如，我有一个CSS选择器：

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

有没有办法写，

(#spotlightPlayer .container .commands.over) span, ul, ul li { clear:both }

Answer 1

您可以使用某种CSS预处理器（如Shaun Inman’s CSS server-side pre-processor）进行转换：

#spotlightPlayer .container .commands.over {
    span,
    ul,
    ul li { clear:both }
}

进入这个：

#spotlightPlayer .container .commands.over span,
#spotlightPlayer .container .commands.over ul,
#spotlightPlayer .container .commands.over ul li { clear:both }

但CSS本身没有这样的语法。

Answer 2

那么你真正想要的是'with'/ grouping构造？

我不认为CSS可以直接执行此操作，但它肯定会有用。

编写一个从速记中生成长版本的基本脚本可能不会太困难。

但是，也许更一致的语法是：

@with( #spotlightPlayer .container .commands.over )
{
    span, ul, ul li { clear:both }
}

虽然在这种情况下更长，但它允许您添加仅适用于该特定块的更多样式。

编辑： 或者更好，请使用其他答案中建议的css预处理器。

另外，关于Jeremy的回答/评论：除非您已经（或计划拥有）.commands.over项目的.container项，否则您可以删除中间部分。

当您对选择器进行空格分隔时，它允许任何后代，而不需要直接的父/子关系（如>那样）。

Answer 3

您可以查看Sass。它有许多有用的小功能，可以让你的样式表比普通的CSS语法允许更具说明性。它以非常自然的方式处理深层嵌套标签。在萨斯，这将是：

#spotlightPlayer .container. commands.over
  span, ul, ul li
    :clear both

Answer 4

如果你想要的只是清理你的CSS，并且你不关心使你的HTML混乱，那么对每个span，ul和ul>li元素应用一个类在相关部分。你可以清除两行额外的CSS，但你会在HTML中获得很大的重量。我不推荐这个。

Answer 5

听起来问题在于您的文档结构而不是您的CSS。您真的需要那么长的标识符列表来获得您需要的特异性吗？您应该只需要HTML元素的属性，例如描述您正在显示的数据。

CSS更简短的查询

5 个答案: