CSS“和”选择器-是否可以选择具有多个类的元素？

我试图选择所有具有.checked和.featured标签的元素。因此，基本上，我要寻找的是“和”选择器；我不知道有没有。

对于这种情况，有什么解决方法吗？

html css

— 米娅
source

是否有像这样的CSS集合选择器.main [:hover,ul,ul>li,p] { display:inline-block;}

— 穆罕默德·乌默尔

Answers:

112

两者都使用（它们之间没有空格）

.checked.featured{
   // ...
}

参考：http : //www.w3.org/TR/selectors/#class-html

例

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>

展开摘要

— 加布里埃莱·彼得里奥利（Gabriele Petrioli）
source

Sitepoint的参考似乎更容易理解（显然是国际海事组织）：reference.sitepoint.com/css/classselector

— Tieson T.

有没有类似的方式来联接两个ID选择器？我尝试了＃pie＃bars表{}（两个具有不同ID的表）。但这不起作用。

— Makan Tayebi

@MakanTayebi您描述的是多个选择器。每次都使用带有完整选择器的逗号。#pie table, #bars table {}

— Gabriele Petrioli 2014年

@MakanTayebi是的，这就是原来的问题。

— Gabriele Petrioli 2014年

@EdwardBlack，你到底是什么意思？如果您打算将其应用于h4同时h5具有两个类的和元素，则h4.checked.featured, h5.checked.featured{...}需要使用,多个选择器

— Gabriele Petrioli，2016年

您可以像这样“连接”两个类： .checked.featured

— 莫塞莱伊
source

要表达AND，您只需将您的类.checked.featured与可能.checked .featured是后代选择器的流行类混淆即可。

看看官方文档

— 克里斯多夫
source

是否有像这样的CSS集合选择器.main [:hover,ul,ul>li,p] { display:inline-block;

— 穆罕默德·乌默尔

@穆罕默德看看css4选择器：matches（）

— Christoph