Question

说我有一个HTML代码如下：

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

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

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

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

Answer 1

您不会为这两种情况制定任何模式，因为＆＃34;或＆＃34;只需使用由, - 逗号分隔的两个选择器，例如：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用特殊属性选择器，例如[id^=a] id以a开头，或[class$=r]类以r结尾，并将它们与逗号结合使用：

[id^=a], [class$=r] { /* styles here */ }

如何使用CSS选择器对元素进行模式匹配，其中EITHER以“a”开头，OR以“b”结尾

2 个答案: