Html CSS“和”选择器 - 我可以选择具有多个类的元素吗?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/14599218/
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 "and" selector - Can I select elements that have multiple classes?
提问by Mia
I'm trying to select all of the elements that have both .checked
and .featured
tags. So basically, what I'm looking for is an "and" selector; I don't know if there is one or not.
我正在尝试选择同时具有.checked
和.featured
标签的所有元素。所以基本上,我正在寻找的是一个“and”选择器;不知道有没有。
Is there any workaround for cases like this?
对于这种情况有什么解决方法吗?
回答by Gabriele Petrioli
You use both (without space between them)
您同时使用两者(它们之间没有空格)
.checked.featured{
// ...
}
Reference: http://www.w3.org/TR/selectors/#class-html
参考:http: //www.w3.org/TR/selectors/#class-html
Example
例子
div{margin:1em;padding:1em;}
.checked{color:green;}
.featured{border:1px solid #ddd;}
.checked.featured{
font-weight:bold;
}
<div class="checked">element with checked class</div>
<div class="featured">element with featured class</div>
<div class="featured checked">element with both checked and featured classes</div>
回答by Moseleyi
You can just "join" two classes like that: .checked.featured
你可以像这样“加入”两个类: .checked.featured
回答by Christoph
To express AND you simply concatenate your classes .checked.featured
which may not be confused with the popular .checked .featured
which is the descendant selector.
为了表达 AND,您只需连接您的类.checked.featured
,这些类可能不会与流行.checked .featured
的后代选择器混淆。
Have a look at the official Documentation
看看官方文档