Question

编写匹配

的CSS选择器的最简单方法是什么

#id.X .X a

适用于所有X？

目前我正在为我需要的每个X手动指定它，但是编写一个全面的语句并且每次添加新的X时都不需要编辑css会更好

编辑：修剪过的HTML适用于：

<div id="id" class="X">
<ul>
<li class="projects">...</li>
<li class="music">...</li>
<li class="resume">...</li>
<li class="contact">...</li>
</ul>
</div>

其中X是projects，music等之一。使封闭div中的类等于其中一个子对象的类的目的是应用一些样式到特定列表元素之一。我想这样做而不是像active类那样的原因是它使我的模板文件更具可读性。

Answer 1

我通过不单独使用CSS来解决这个问题。相反，我修改了代码以使用active类，然后匹配它。这让我的模板更复杂，但最终它是一个更好的解决方案。

要说清楚，我现在有类似的东西：

<div id="id">
<ul>
<li class="active">...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

Answer 2

当前的CSS不提供避免在您的情况下枚举所有父/子类组合的方法。因此，您的模板应该更复杂，而CSS则不那么复杂，反之亦然。使用active或cur等类标记当前元素是最常用且最广泛使用的解决方案。

Answer 3

如果您可以使用命名模式以便该类以某个字符串开头，包含或结尾，则可以使用属性选择器

以

开头

#id[class^="foo"] *[class^="foo"] a { color: red; }

<强>包含

#id[class*="foo"] *[class*="foo"] a { color: red; }

结束

#id[class$="foo"] *[class$="foo"] a { color: red; }

小提琴使用以：http://jsfiddle.net/TufaD/

开头

另一种策略是将一个公共类分配给您希望以这种方式设置样式的所有元素。

Answer 4

由于您希望class是与目标基础相同class的孩子，我认为您有三个选项， 第一个 是您正在使用的方法。

second 会在HTML中添加一些额外内容（第二个对象上的第二个类只有在嵌套时）才会这样：

<强> CSS

.nestedA a {... blah ...}

<强> HTML

<div id="id" class="X"><div class="X nestedA"><a></a></div></div>

因此它会缩小你的CSS，但会扩展你的HTML，要求你对它进行编码（知道它是嵌套的，无论是手工还是通过javascript检测）。

第三是为您打算使用的任何类添加前缀，并使用属性启动选择器（IE8 +和DOCTYPE），这样（注意开头部分必须分开）用连字符）：

<强> CSS

.na-X {... X class blah ...}
[class|=na] [class|=na] a {... blah ...}

<强> HTML

<div id="id" class="na-X"><div class="na-X"><a></a></div></div>

编写这个CSS选择器最简单的方法是什么？

4 个答案: