javascript - 如何使用以 "a"开头或以 "b"结尾的 CSS 选择器对元素进行模式匹配

Question

假设我有如下 HTML 代码:

    <div>
     <input id = "adhf" class ="gr"></input>
     <form id = "bkgfsd" class ="fh"></form>
     <input id = "adsada" class ="fr"></input>
    </div>

现在我想使用 CSS 选择器进行模式匹配，这样我就可以 grep id 以“a”开头或类以“r”结尾的元素。

我知道 ^ 用于模式匹配以某物开头的元素，$ 用于模式匹配以某物结尾的元素，但我如何创建两者的并集？

在这种情况下，精确模式匹配 CSS 选择器是什么？

Answer 1

您不需要为这两个条件创建任何模式，因为“或”只是使用由 ,-逗号分隔的两个选择器，例如:

div > [id^="a"],
div > [class$="r"] {
  background: pink;
  min-height: 30px;
}

<div>
  <input id="and" class="g" placeholder="Target by ID"></input>
  <form id="other" class="fh">Not Target</form>
  <input id="be" class="fr" placeholder="Target by class"></input>
</div>