正則匹配屬性選擇器

>它們不存在，但是那不是那麼酷嗎？我不知道實施正則是多麼困難，或者如何付出昂貴的解析，但這不是炸彈嗎？

>

>假設我有很多元素，所有元素都具有相似的類名稱，它們具有一些共享的樣式，但也需要單個規則，例如：

<ul >
	<li ><a href="/">Home</a></li>
	<li ><a href="/products/">Products</a></li>
	<li ><a href="/about/">About</a></li>
</ul>

我可以在這些列表項目上進行圖像替換來創建圖形導航欄，並具有這樣的規則：>

#menu li
{
	background:none #fff no-repeat;
}

#menu li#menu-home
{
	background-image:url("home.png");
}

#menu li#menu-products
{
	background-image:url("products.png");
}

#menu li#menu-about
{
	background-image:url("about.png");
}

>還不錯，但是隨著結構的大小的增長，CSS

也會增長。如果結構變得很大，那麼CSS將變得同樣冗長。更不用說每次添加新項目時都必須手動編輯它的事實。 > ，但是如果我能做到這一點，該怎麼辦：

>

現在，我的菜單樣式是無限擴展的 - 我可以添加任意數量的新項目，而無需觸摸CSS

#menu li[id%="/^menu-([a-z]+)$/"]
{
	background-image:url(".png");
}

！

只是一個想法…

在正則匹配屬性選擇器上經常詢問問題

>什麼是css？

REGEX匹配屬性選擇器中的REGEX匹配屬性選擇器是CSS中的功能強大工具，可讓您根據其屬性值選擇元素。它使用正則表達式（形成搜索模式的字符序列）來匹配屬性值。當您想以某種方式設計具有相似屬性的元素時，此功能特別有用。 For example, you can select all the input elements with a type attribute that starts with ‘text’ and apply a specific style to them.

How do I use Regex Matching Attribute Selectors in CSS?

To use Regex Matching Attribute Selectors in CSS, you need to use the attribute selector syntax, which is an element name followed by an attribute name in square brackets.屬性名稱之後是匹配操作員，可以是'='，‘〜='，'| ='，'^='，'$ ='或'*='，然後在引號中的屬性值。例如，輸入[type^=“ text”]將選擇具有'text'開頭的類型屬性的所有輸入元素。

>我可以使用任何屬性匹配regex匹配屬性選擇器嗎？

是的，您可以將REGEX匹配屬性selectors與任何屬性匹配。這包括標準屬性，例如“類”，“ id”，“ type”，“ href”等，以及自定義屬性。但是，請記住，並非所有瀏覽器都支持所有屬性，因此在使用特定屬性之前，請檢查瀏覽器的兼容性總是一個好主意。 >

> REGEX匹配屬性選擇器中有哪些不同的匹配運算符？ The ‘=’ operator matches exactly, the ‘~=’ operator matches any space-separated value, the ‘|=’ operator matches any dash-separated value or the exact value, the ‘^=’ operator matches the start of the value, the ‘$=’ operator matches the end of the value, and the ‘*=’ operator matches any part of the value.

Can I use Regex Matching Attribute Selectors in JavaScript？

是的，您可以使用QuerySelector和QuerySelectorAll方法在JavaScript中使用REGEX匹配屬性選擇器。這些方法分別返回與指定的CSS選擇器匹配的第一個元素或所有元素。例如，document.queryselector（'輸入[type^=“ text”]'）將返回第一個輸入元素，其類型屬性以'text'開頭。

是regex匹配屬性屬性selectors case-selectors case-sentive selective case-sentive sysive

默認情況下，regex匹配屬性屬性屬於case-sepensive case-sensive。但是，您可以通過在屬性值之後添加“ i”來使它們對細節不敏感。例如，輸入[type^=“ text” i]將選擇所有以'text'開頭的輸入元素，無論情況如何。

>

>我可以在單個規則中使用多個regex匹配屬性屬性選擇器嗎？

是的，是的，您可以將多個regex匹配的屬性屬於單個規則與單一規則相匹配。例如，輸入[type^=“ text”]，輸入[type^=“ password”]將選擇所有以'text'或'password'開頭的輸入元素。

>我可以將匹配的屬性選擇器與其他選擇器與其他選擇器相匹配嗎？例如，輸入[type^=“ text”]。活動將選擇所有以'text'開頭的類型屬性選擇的所有活動輸入元素。

如果沒有元素匹配regex匹配屬性屬性selector？

，如果沒有元素匹配regex匹配的regex匹配屬性屬性選擇者，則會發生什麼情況，該規則將無需屬性。它不會引起任何錯誤或打破CSS的其餘部分。

使用REGEX匹配屬性選擇器時是否有任何性能注意事項？ >>>，而REGEX匹配屬性選擇器非常強大，它們比其他選擇器可以慢，尤其是在大型文檔上使用時。因此，最好明智地使用它們，並始終測試您的CSS的性能。 >

以上是正則匹配屬性選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！