如何模式匹配使用其或者以“A”开头或以“B”结尾

说我有一个HTML代码如下CSS选择器的元素：如何模式匹配使用其或者以“A”开头或以“B”结尾

<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选择器在这种情况下会是什么？

来源

2017-04-10 JSlearner

选择器可以有多个由逗号分隔的模式，并且总体选择器可以匹配任何模式。 – Pointy

还要注意，使用具有'class'属性的属性选择器（'[foo = bar]'）是脆弱的并且容易出错。元素可以有多个类，对属性值中类的顺序没有意义。 – Pointy

您可以使用特殊的属性选择像[id^=a] ID与开始，或[class$=r]类有R结束，用逗号所以将它们结合起来：

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

来源

2017-04-10 17:38:08

感谢您的回复 – JSlearner

你不作任何模式两种条件，因为是 “或” 只使用这两种选择由, -comma separeted，是这样的：

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>

来源

2017-04-10 17:38:10 DaniP

如何模式匹配使用其或者以“A”开头或以“B”结尾

回答

相关问题