如何在 CSS 波浪线属性选择器中包含多个值？

Question

我正在尝试 select 通过使用波浪号属性 select 或多个值的列表元素。

如果我只输入一个这样的值，它工作正常：

a[class~="logo1"] {
    background: gold;
}

但是，如果我这样说（我的目标是有多个值），它不起作用：

a[class~="logo1 logo2"] {
    background: gold;
}

在 MDN 页面上，我读到一个值可以是 空格分隔的单词列表 。但我可能犯了语法错误，因为它不起作用。

代码笔： https://codepen.io/kodplay/pen/GRQEeOE?editors=1100

谢谢！

Answer 1

你可以写多个选择器结合 ','

a[class~="logo1"],a[class~="logo2"] {
    background: gold;
}

Answer 2

是新选择器:is

a:is(.logo1, .logo2) {
  background: gold;
}

<ul>
  <li><a href="#internal" id="internal">Internal link</a></li>
  <li><a href="http://example.com" class="logo1">Logo 1</a></li>
  <li><a href="#InSensitive" class="logo2">Logo 2</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
  <li><a href="https://temp.org">Example exact match</a></li>
</ul>

如何在 CSS 波浪线属性选择器中包含多个值？

How to have multiple values inside a CSS tilde attribute selector?

css

css-selectors