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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:19:54  来源:igfitidea点击:

CSS "and" selector - Can I select elements that have multiple classes?

htmlcss

提问by Mia

I'm trying to select all of the elements that have both .checkedand .featuredtags. 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.featuredwhich may not be confused with the popular .checked .featuredwhich is the descendant selector.

为了表达 AND,您只需连接您的类.checked.featured,这些类可能不会与流行.checked .featured的后代选择器混淆。

Have a look at the official Documentation

看看官方文档