如何模式匹配使用其或者以「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」結尾

回答

相關問題