当它们具有不同的ID时如何选择所有元素？答案

【问题标题】：How to select all elements when they have a different ID?当它们具有不同的ID时如何选择所有元素？
【发布时间】：2014-07-10 07:15:02
【问题描述】：

我有一个这样的 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/

【问题讨论】：

不能这样用吗？ .k-state-active {/*这里是 CSS*/}
Tushar 的意思是，你的选择器中是否还有其他与 .k-state-active 类匹配的元素？
另外，到目前为止，您尝试了什么？

标签： css

【解决方案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) 上对其进行测试，但它应该可以工作。你能捆绑一个小提琴吗？

【讨论】：

【解决方案2】：

不要使用 ID 设置样式，使用类设置样式。

使用 id（例如 html 中的 id="example" 与 css 中的 #example 匹配）只会对具有该特定 ID 的元素进行样式设置。您可以使用上面的代码设置多个 ID 项的样式；技术上没有任何问题错了。

但是，如果您希望多个元素都具有相同的样式，则更简单的方法是给它们一个类。在 html 中，这意味着将 class="example" 放入元素中，并将其与 css 中的 .example 匹配。此后，您希望每个元素都具有该样式，只需为其指定类即可。

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

【讨论】：

虽然您的答案听起来正确，但您应该详细说明您的答案。好像提问者对 CSS 还不太了解。
@SebastianZartner 如果您的文档是 CSS2，是否适用？
@Schneider 您可以在所有 CSS 中使用类和 ID——它们是它的基础。
我没有问过 ID 和类，我问如果文档类型是 HTMl4，CSS3 是否有效？
CSS 独立于网站使用的 HTML 版本工作。所以是的，CSS3 将在 HTML4 中解释。