CSS“and”选择器 - 我可以选择具有多个类的元素吗？

Question

我正在尝试选择具有.checked和.featured标签的所有元素。所以基本上，我要找的是一个“and”选择器；我不知道是否有这样的选择器。

对于这种情况，是否有任何解决方法？

- Mia

---

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

Answer 1

您需要同时使用两者（不要在它们之间留空格）

.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

---

Sitepoint的参考资料似乎更易于理解（在我看来，显然是这样的）：http://reference.sitepoint.com/css/classselector - Tieson T.

有没有类似的方法可以连接两个ID选择器呢？ 我尝试了 #pie#bars table {}（两个不同ID中的两个表）。但是那样不起作用。 - Makan

@MakanTayebi，您所描述的是多个选择器。每次只需使用逗号和完整的选择器即可。#pie table，#bars table {} - Gabriele Petrioli

那么 '.checked.featured' 只会选择同时具有这两个类的项目？ - Makan

@MakanTayebi 是的，这就是原始问题所涉及的内容。 - Gabriele Petrioli

@EdwardBlack，你的意思是什么？如果你想将它应用于同时具有这两个类的h4和h5元素，则需要使用逗号,来选择多个选择器：h4.checked.featured, h5.checked.featured{...}。 - Gabriele Petrioli

Answer 2

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

- Moseleyi

Answer 3

为了表达AND，你只需将你的类连接在一起 .checked.featured，这个不能与常见的后代选择器 .checked .featured 混淆。

请查看官方文档 文档。

- Christoph

---

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

@Muhammad，请看一下CSS4选择器:matches()。 - Christoph