Question

我有一个CSS规则，如下所示：

div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-1.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-2.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-3.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-4.k-content.k-state-active,
div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div#tabstripProjectSettings-5.k-content.k-state-active 
{
    /* CSS Properties */
}

是否可以缩短它？因为我不知道ID为#tabstripProjectSettings-x的元素有多少。

这是一个例子： http://jsfiddle.net/AVF3J/

Answer 1

也许你应该尝试这样的事情：

div#tabstripProjectSettings.tabstrip-inner-tabstrip.k-widget.k-header.k-tabstrip div[id^="tabstripProjectSettings-"].k-content.k-state-active {
    /* css here */
}

部分div[id^="tabstripProjectSettings-"]说：选择其ID以tabstripProjectSettings-开头的所有div。虽然没有在你的巨型巨型选择器（：D）上进行测试，但它应该可行。你能捆绑一个小提琴吗？

Answer 2

不要使用ID来设置它们的样式，使用类来设置它们的样式。

在css中使用与id="example匹配的html中的ID（例如#example＆＃34;）将仅设置具有该特定ID的元素的样式。您可以使用上面的代码来设置多个ID项的样式;它在技术上没有任何问题。

但是，如果你想要的几个元素都具有相同的样式，那么更简单的方法就是给它们一个类。在html中，这意味着将class="example"放入元素中，并将其与css中的.example匹配。此后，您希望拥有该样式的每个元素，只需将其赋予该类。

您还可以组合多个类和ID。

如何在具有不同ID时选择所有元素？

2 个答案: