0

For example I have a CSS selector:

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

Is there a way to write like, 

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

5 回答 5

2

您可以使用某种 CSS 预处理器，例如Shaun Inman 的 CSS 服务器端预处理器来转换：

#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 本身没有这样的语法。

于 2009-02-26T18:22:45.893 回答
1

那么你实际上想要的是一个'with'/grouping 构造？

我不认为 CSS 可以直接做到这一点，但它肯定会很有用。

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

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

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

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

编辑：或者更好的是，使用另一个答案中建议的 css 预处理器。


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

当你用空格分隔你的选择器时，它允许任何后代，而不是需要直接的父/子关系（就像>那样）。

于 2009-02-26T18:34:28.003 回答
1

You might check out Sass. It has a lot of helpful little features that let you make your style sheets more declarative than the normal CSS syntax allows. It handles deeply nested tags in a very natural way. In Sass, this would be:

#spotlightPlayer .container. commands.over
  span, ul, ul li
    :clear both
于 2009-02-26T19:04:37.183 回答
0

如果您只想清理您的 CSS，并且您不关心让您的 HTML 混乱，请为相关部分中的每个 、 和 元素span应用ul一个类。ul>li您可以清除两行额外的 CSS，但您会在 HTML 杂乱无章中获得很多权重。我不会推荐这个。

于 2009-02-26T18:16:23.273 回答
-2

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

于 2009-02-26T18:12:19.990 回答