"AND" 个运算符在 CSS 个选择器中

Question

我非常熟悉 xpath，但不太熟悉 css 选择器来查找特定元素。

我知道这个 xpath //input[contains(@value, "15.02.2022") 会导致这个 css-选择器 input[value*="15.02.2022"]。

但是您如何将此 xpath //input[contains(@value, "15.02.2022") and contains(@value, "123")] 转换为 css 选择器？

你会如何使用“AND”运算符来查找某个元素？

Answer 1

一般来说，您并不仅限于一种选择器（元素选择器除外，原因很明显）：

.a.b {
    color: green;
}

<span class="a">Only A</span>
<span class="b">Only B</span>
<span class="a b">Both A and B</span>

属性选择器的工作方式相同：

input[value*="15.02.2022"][value*="123"] {
    color: green;
}

<input value="Only 15.02.2022">
<input value="Only 123">
<input value="Both 15.02.2022 and 123">

"AND" operator in CSS selectors