Question

如果我有以下div：

<div class="sectionA" id="content">
    Lorem Ipsum...
</div>

有没有办法定义一种表达“带有id='content'和class='myClass'的div”这个想法的风格？

或者您只是按照

中的方式选择其中一种方式

<div class="content-sectionA">
    Lorem Ipsum...
</div>

或者

<div id="content-sectionA">
    Lorem Ipsum...
</div>

Answer 1

在样式表中：

div#content.myClass

编辑：这些也可能有所帮助：

div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */

并且，根据您的示例：

div#content.sectionA

编辑，4年后：由于这是超级旧版，人们会不断发现它：不在您的选择器中使用tagNames。 #content.myClass比div#content.myClass快，因为tagName会添加您不需要的过滤步骤。 仅在您必须使用的选择器中使用tagNames！

Answer 2

css中#header .callout和#header.callout之间存在差异。

这是＆＃34;普通英语＆＃34; #header .callout：
选择类名为callout的所有元素，这些元素是ID为header的元素的后代。

#header.callout表示：
选择ID为header且类名为callout的元素。

您可以在此处阅读更多内容css tricks

Answer 3

通常，您不需要对id指定的元素进行分类，因为id始终是唯一的，但如果您确实需要，则以下内容应该有效：

div#content.sectionA {
    /* ... */
}

Answer 4

在一个元素上组合id和类没有任何问题，但是你不需要为一个规则同时识别它。如果你真的想要你能做到：

#content.sectionA{some rules}

您不需要其他人建议的ID前面的div。

一般而言，应该使用ID设置特定于该元素的CSS规则，并且这些规则将比仅仅类的那些具有更大的权重。该类指定的规则将是适用于您不希望在需要调整的任何时候在多个位置更改的多个项目的属性。

归结为：

 .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}

有意义吗？

Answer 5

你可以在CSS中组合ID和类，但ID应该是唯一的，因此向CSS选择器添加一个类会使它过高。

Answer 6

在css中的标记变量中使用：tag.id ; tag#class。

Answer 7

ID应该是唯一的文档范围，因此您不必基于两者进行选择。您可以使用class="class1 class2"

为多个类分配一个元素

Answer 8

我认为你错了。 ID与Class不是特异性问题;它们具有完全不同的逻辑用途。

ID应该用于标识页面的特定部分：标题，导航栏，主文章，作者归属，页脚。

应该使用类来将样式应用于页面。假设你有一个普通的杂志网站。网站上的每个页面都将具有相同的元素 - 标题，导航，主文章，侧边栏，页脚。但是你的杂志有不同的部分 - 经济，体育，娱乐。你希望这三个部分有不同的外观 - 经济保守和方形，体育动作，娱乐明亮和年轻。

您可以使用类。您不希望制作多个ID - #conomical-article和＃sports-article以及#etertainment-article。这没有意义。相反，你要定义三个类，.economics，sports和.entertainment，然后为每个类定义#nav，＃article和#footer id。

Answer 9

继续 Ajm 的回答：

对于动态 id 或类选择组合 ->

div[id*='**myStandarKey-**'].myClass{

}

/* This is to validate something like: */

div[id*='myStandarKey-**12**'].myClass{

}

/* AND */

div[id*='myStandarKey-**13**'].myClass{

}

/* etc. */

Answer 10

.sectionA[id='content'] { color : red; }

当doctype是html 4.01但是......

时无效

如何在CSS选择器中组合类和ID？

10 个答案: