CSS：应用于类组合的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2451399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Style applied to a combination of classes?
提问by Eli
I'm not sure this is possible, but is there a syntax to be used in CSS when you want to style an element based on the combination of classes applied to it?
我不确定这是否可行，但是当您想根据应用于元素的类的组合来设置元素的样式时，是否有可以在 CSS 中使用的语法？
I understand that I can check an element with jQuery or something and change it's style based on the classes it has, but is there a pure CSS way to do this?
我知道我可以使用 jQuery 或其他东西检查一个元素并根据它拥有的类更改它的样式，但是有没有纯 CSS 方法来做到这一点？
For example, if I have a class for bold and green:
例如，如果我有一个粗体和绿色的类：
.bold_green { color:green; font-weight:bold; }
And a class for bold and blue:
还有一个大胆和蓝色的类：
.bold_blue { color:blue; font-weight:bold. }
Now, say I am using jQuery to add and remove classes dynamically and want any element that has both classes to turn italic pink.
现在，假设我正在使用 jQuery 动态添加和删除类，并希望具有这两个类的任何元素都变成斜体粉红色。
Something like:
就像是：
.bold_green AND .bold_blue { color:pink; font-style:italic; }
Or, if I want to style an element that has aclass, and is a descendant of another element that has another class?
或者，如果我想设置具有类的元素的样式，并且是具有另一个类的另一个元素的后代？
Something like:
就像是：
.bold_green HAS_CHILD .bold_blue { color:black; background-color:yellow; }
Thanks!
谢谢！
Edit
编辑
Thanks for all the answers. These are pretty much what I thought (just treating the classes as regular selectors), but they don't seem to be working for me. I will have to check my code and make sure they aren't being overridden somehow...
感谢所有的答案。这些几乎是我的想法（只是将类视为常规选择器），但它们似乎对我不起作用。我将不得不检查我的代码并确保它们不会以某种方式被覆盖......
回答by Paul Alexander
$('.bold_green.bold_blue').addClass('something-else');
Or in CSS:
或者在 CSS 中：
.bold_green.bold_blue { color: pink; }
Notice there's no space between the selectors.
请注意，选择器之间没有空格。
回答by Esteban Küber
You don't need anything special, just
你不需要什么特别的，只要
.bold_green.bold_blue { color:pink; font-style:italic; }
回答by Joel
Pauland Voyagerare correct for the multiple classes case.
For the "HAS CHILD" case you would use:
对于“HAS CHILD”情况，您将使用：
.bold_green .bold_blue { ... } /* note the ' ' (called the descendant selector) */
Which will style any bold_blueelements inside a bold_greenelement.
这将设置bold_blue元素内的任何元素的样式bold_green。
Or if you wanted a DIRECT child:
或者，如果您想要一个 DIRECT 孩子：
.bold_green > .bold_blue { ... } /* this child selector does not work in IE6 */
Which will style only bold_blueelements which have an immediate parent bold_green.
这将只bold_blue为具有直接父元素的元素设置样式bold_green。
回答by Mehdi
In visual studio 2013 the CSS setting is applied to multiple classes by a "Comma" as follows:
在 Visual Studio 2013 中，CSS 设置通过“逗号”应用于多个类，如下所示：
.bold_green, .bold_blue { color:pink; font-style:italic; }
.bold_green, .bold_blue { color:pink; font-style:italic; }
