entityMap|blocks|key|366gm|text|在样式表中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|a4buk|div#content.myClass|code-block|syntax|javascript|8q3b3|编辑:这些也可能会有帮助：|5lpcf|div#content.myClass.aSecondClass.aThirdClass+/*+Won't+work+in+IE6,+but+valid+*/
div.firstClass.secondClass+/*+ditto+*/|ercvj|并且，根据您的示例：|daloc|div#content.sectionA|413eq|编辑，4年后：|a7kfa|因为这是超级古老的，人们一直在寻找它：|d6r07|不要|4jo0|在选择器中使用tagNames。|ecc02|比|cmn3n|因为tagName添加了一个您不需要的过滤步骤。|eoh0k|只在必须的地方使用选择器中的tagNames！^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|13|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|14|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|15|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|16|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|17|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|18|9|@]|A|@]|B|$F|G]]|$2|P|4|Q|6|7|8|19|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|1A|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1B|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1C|9|@]|A|@]|B|$]]|$2|X|4|Y|6|7|8|1D|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1E|9|@]|A|@]|B|$]]|$2|11|4|12|6|7|8|1F|9|@]|A|@]|B|$]]]]

In your stylesheet:

<pre><code>div#content.myClass
</code></pre>

Edit: These might help, too:

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

and, per your example:

<pre><code>div#content.sectionA
</code></pre>

Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. <code>#content.myClass</code> is faster than <code>div#content.myClass</code> because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!

entityMap|blocks|key|20isf|text|两者之间存在差异|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1hqdc|和|5jp2h|在css中。|1rt7t|这里是“简单的英语”|6vhqc|选择具有该类名的所有元素|2cmo8|，它们是ID为|6fkb3|..。|89ecj|b4jbu|意思是：|dnrlc|选择ID为的元素|9ok68|还有一个类名|11obt|8j9kl|你可以在这里阅读更多|c5nhj|css技巧^0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|10|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|11|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|12|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|13|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|14|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|15|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|16|9|@]|A|@]|B|$]]|$2|O|4|D|6|7|8|17|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|18|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|19|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1A|9|@]|A|@]|B|$]]|$2|V|4|N|6|7|8|1B|9|@]|A|@]|B|$]]|$2|W|4|X|6|7|8|1C|9|@]|A|@]|B|$]]|$2|Y|4|Z|6|7|8|1D|9|@]|A|@]|B|$]]]]

There are differences between <code>#header .callout</code> and <code>#header.callout</code> in css. 

Here is the "plain English" of <code>#header .callout</code>: 
Select all elements with the class name <code>callout</code> that are descendants of the element with an ID of <code>header</code>.

And <code>#header.callout</code> means: 
Select the element which has an ID of <code>header</code> and also a class name of <code>callout</code>.

You can read more here <a href="http://css-tricks.com/multiple-class-id-selectors/" rel="noreferrer">css tricks</a>

entityMap|blocks|key|5tm0q|text|在一个元素上组合id和class没有什么错，但是您不应该为了一条规则而同时使用这两个元素。如果你真的想这样做，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5fhuu|#content.sectionA{some+rules}|code-block|syntax|javascript|ce53v|您不需要|49agf|在ID前面，正如其他人所建议的那样。|atugt|通常，特定于该元素的CSS规则应该使用ID进行设置，并且这些规则将比仅针对类的规则具有更大的权重。类指定的规则是应用于多个项目的属性，您不希望在任何需要调整的时候在多个地方更改这些属性。|dv1l9|这可以归结为：|66bbk|.sectionA{some+general+rules+here}
+#content{specific+rules,+and+overrides+for+things+in+.sectionA}|98ogb|有意义吗？^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|U|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|V|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|W|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|E|8|Z|9|@]|A|@]|B|$F|G]]|$2|R|4|S|6|7|8|10|9|@]|A|@]|B|$]]]]

There's nothing wrong with combining an id and a class on one element, but you shouldn't need to identify it by both for one rule. If you really want to you can do:

<pre><code>#content.sectionA{some rules}
</code></pre>

You don't need the <code>div</code> in front of the ID as others have suggested.

In general, CSS rules specific to that element should be set with the ID, and those are going to carry a greater weight than those of just the class. Rules specified by the class would be properties that apply to multiple items that you don't want to change in multiple places anytime you need to adjust.

That boils down to this:

<pre><code> .sectionA{some general rules here}
 #content{specific rules, and overrides for things in .sectionA}
</code></pre>

Make sense?

entityMap|blocks|key|8j42|text|一般情况下，你不需要对id指定的元素进行分类，因为id总是唯一的，但是如果你真的需要的话，下面的方法应该是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1v8gd|div#content.sectionA+{
++++/*+...+*/
}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Well generally you shouldn't need to classify an element specified by id, because id is always unique, but if you really need to, the following should work:

<pre><code>div#content.sectionA {
 /* ... */
}
</code></pre>

entityMap|blocks|key|deh6g|text|你|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8cvu2|可以|4om40|在CSS中组合ID和Class，但是ID应该是唯一的，因此将类添加到CSS选择器会过度限定它。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

Ids are supposed to be unique document wide, so you shouldn't have to select based on both. You can assign an element multiple classes though with <code>class="class1 class2"</code>

entityMap|blocks|key|84hsu|text|Ids应该是文档宽度内唯一的，所以您不必同时基于这两个进行选择。您可以为一个元素分配多个类，但是使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

entityMap|blocks|key|92e3e|text|我认为你们都错了。IDs与Class不是一个特定的问题；它们具有完全不同的逻辑用途。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2dnar|ID应用于标识页面的特定部分:页眉、导航栏、正文、作者属性、页脚。|1e3q7|类应用于将样式应用于页面。假设你有一个普通的杂志网站。站点上的每个页面都将具有相同的元素--页眉、导航、正文、侧边栏、页脚。但是你的杂志有不同的版面--经济，体育，娱乐。你希望这三个部分有不同的外观--经济上保守而正派，体育运动上的，娱乐上的聪明而年轻。|2rbn6|您可以使用类来实现这一点。你不会想要创建多个IDs-经济类文章、体育类文章和娱乐类文章。这说不通。相反，您将定义三个类：.economics、sports和.entertainment，然后为每个类定义#nav、#文章和#页脚ids。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

I think you are all wrong. IDs versus Class is not a question of specificity; they have completely different logical uses.

IDs should be used to identify specific parts of a page: the header, the nav bar, the main article, author attribution, footer.

Classes should be used to apply styles to the page. Let's say you have a general magazine site. Every page on the site is going to have the same elements--header, nav, main article, sidebar, footer. But your magazine has different sections--economics, sports, entertainment. You want the three sections to have different looks--economics conservative and square, sports action-y, entertainment bright and young.

You use classes for that. You don't want to have to make multiple IDs--#economics-article and #sports-article and #entertainment-article. That doesn't make sense. Rather, you would define three classes, .economics, sports, and .entertainment, then define the #nav, #article, and #footer ids for each.

entityMap|blocks|key|7qjl2|text|使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|drvbg|在css的标记变量中。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

use: <code>tag.id ; tag#class</code>in the tag variables in your css.

entityMap|blocks|key|ea4|text|继续Ajm的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|ffcu7|对于动态id或类选择组合->|23qh3|div[id*='**myStandarKey-**'].myClass{

}

/*+This+is+to+validate+something+like:+*/

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

}

/*+AND+*/

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

}

/*+etc.+*/|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

Continuing Ajm's answer:
For a dynamic id or class selection combination -&gt;
<pre class="lang-css prettyprint-override"><code>div[id*='**myStandarKey-**'].myClass{

}

/* This is to validate something like: */

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

}

/* AND */

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

}

/* etc. */
</code></pre>

entityMap|0|type|IMAGE|mutability|IMMUTABLE|data|imageUrl|https://ask.qcloudimg.com/http-save/actteam/d8035a487de8f5d18d99e0b9acadec97.png|imageAlt|blocks|key|unfp|text|当我试图构建我的windows应用程序时，我得到了以下错误。|unstyled|depth|inlineStyleRanges|entityRanges|couo1|命令|ehl69|"C:\repos\CommunityLive\CL|d1b7d|_|30gds|GateApp\signing\StrongNameUnsignedAssemblies.bat+C：\repos\社区现场\CL|7f3c3|2acqu|GateApp\signing“已退出，代码为%25+2。|1i908|4ibkn|以下是我的预编译事件命令行|10ubt|$(ProjectDir)signing\StrongNameUnsignedAssemblies.bat+$(ProjectDir)signing\|code-block|syntax|javascript|20oqp|以下是宏的详细信息|9oqsq|​|ccn7o|fhlkc|?|atomic|offset|length|a8v87|ktjo^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1|0|0|0^^$0|$1|$2|3|4|5|6|$7|8|9|-4]]]|A|@$B|C|D|E|2|F|G|1E|H|@]|I|@]|6|$]]|$B|J|D|K|2|F|G|1F|H|@]|I|@]|6|$]]|$B|L|D|M|2|F|G|1G|H|@]|I|@]|6|$]]|$B|N|D|O|2|F|G|1H|H|@]|I|@]|6|$]]|$B|P|D|Q|2|F|G|1I|H|@]|I|@]|6|$]]|$B|R|D|O|2|F|G|1J|H|@]|I|@]|6|$]]|$B|S|D|T|2|F|G|1K|H|@]|I|@]|6|$]]|$B|U|D|-4|2|F|G|1L|H|@]|I|@]|6|$]]|$B|V|D|W|2|F|G|1M|H|@]|I|@]|6|$]]|$B|X|D|Y|2|Z|G|1N|H|@]|I|@]|6|$10|11]]|$B|12|D|13|2|F|G|1O|H|@]|I|@]|6|$]]|$B|14|D|15|2|F|G|1P|H|@]|I|@]|6|$]]|$B|16|D|-4|2|F|G|1Q|H|@]|I|@]|6|$]]|$B|17|D|18|2|19|G|1R|H|@]|I|@$1A|1S|1B|1T|B|1U]]|6|$]]|$B|1C|D|-4|2|F|G|1V|H|@]|I|@]|6|$]]|$B|1D|D|15|2|F|G|1W|H|@]|I|@]|6|$]]]]

<pre><code>.sectionA[id='content'] { color : red; }
</code></pre>

Won't work when the doctype is html 4.01 though...

If I have the following div:

<pre><code>&lt;div class="sectionA" id="content"&gt;
 Lorem Ipsum...
&lt;/div&gt;
</code></pre>

Is there a way to define a style that expresses the idea "A div with <code>id='content'</code> AND <code>class='myClass'</code>"?

Or do you have simply go one way or the other as in 

<pre><code>&lt;div class="content-sectionA"&gt;
 Lorem Ipsum...
&lt;/div&gt;
</code></pre>

Or

<pre><code>&lt;div id="content-sectionA"&gt;
 Lorem Ipsum...
&lt;/div&gt;
</code></pre>

How to combine class and ID in CSS selector?

 如果我有以下div： Lorem Ipsum... 有没有办法定义一种样式来表达"A div with“这一概念？ 和 "？ 或者你只是简单地走一条路或另一条路，就像下面这样 Lorem Ipsum... 或者 Lorem Ipsum...

问如何在CSS选择器中组合class和ID？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS选择器中组合class和ID？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS选择器中组合class和ID？
EN