CSS中的通配符選擇器（*、^和$）用於類
在 CSS 中，選擇器用於透過類別名稱、id、標籤等來選擇元素。 CSS 中也提供了一些通配符選擇器，我們可以使用它們來定義選擇 HTML 元素的查詢。
通配符選擇器允許我們選擇在特定屬性（例如 class 或 id）的值中包含特定子字串的 HTML 元素。在本教程中，我們將學習使用 *、^ 和 $ 通配符選擇器來表示類別和 id。
CSS 中包含 (*=) 通配符選擇器
包含 (*=) 通配符選擇器可讓開發人員尋找屬性值包含「string」作為子字串的所有 HTML 元素。例如，對類別使用「*」通配符選擇器可尋找類別名稱包含該字串的所有 HTML 元素。
文法
使用者可以依照下列語法對類別使用包含 (*) 通配符選擇器。
[class*="string"] {
}
上述語法選擇所有包含「string」作為類別名稱中的子字串的 HTML 元素。
範例
在下面的範例中，我們建立了四個不同的 div 元素，並根據其類別名稱在其中添加了文字。在 CSS 中，我們使用「contains」通配符選擇器來選擇類別名稱包含「test」作為子字串的所有 div 元素。
在輸出中，使用者可以觀察到前兩個 div 元素的文字顏色為紅色，因為它包含一個帶有「test」子字串的類別名稱。
<html>
<head>
<style>
[class*="test"] {
color: red;
font-size: 2rem;
}
</style>
</head>
<body>
<h2 id="Using-the-i-contains-i-wildcard-CSS-selector-in-CSS"> Using the <i> contains (*=) </i> wildcard CSS selector in CSS. </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "demo"> This is a text with the class name demo test. </div>
<div class = "element"> This is a text with the class name element.</div>
</body>
</html>
CSS 中以 (^=) 通配符選擇器開頭
開頭 (^=) 通配符選擇器允許我們選擇屬性值以特定子字串開頭的所有 HTML 元素。
文法
使用者可以依照下列語法對類別使用以通配符開頭的選擇器。
[class^="string"] {
}
以上語法選擇類別名稱以「string」開頭的所有 HTML 元素。
範例
在下面的範例中，我們使用了以 (^=) 開頭的通配符 CSS 選擇器和類別來根據類別名稱選擇元素。
在輸出中，使用者可以觀察到第一個和第三個 div 元素的文字變成藍色，因為它在開頭包含「test」字串。第二個 div 元素在類別名稱中包含“test”，但它位於類別名稱的末尾，因此不會被開頭 (^=) 通配符選擇器選取。
<html>
<head>
<style>
[class^="test"] {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<h2 id="Using-the-i-starts-with-i-wildcard-CSS-selector-in-CSS"> Using the <i> starts with (^=) </i> wildcard CSS selector in CSS </h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "element"> This is a text with the class name element. </div>
</body>
</html>
CSS 中以 ($=) 通配符選擇器結尾
如果特定屬性值結尾包含子字串，則以 ($=) 結尾的通配符選擇器會選擇所有 HTML 元素。例如，如果兩個不同元素的類別名稱是“onestart”和“lastone”，並且子字串是“one”，則它將選擇一個僅具有“lastone”類別名稱的HTML 元素，因為它包含第一個子字串結尾。
文法
使用者可以依照下列語法對類別使用結尾為 ($=) 通配符 CSS 選擇器。
[class$="string"] {
}
上述語法選擇類別名稱以「string」子字串結尾的所有 HTML 元素。
範例
在下面的範例中，第二個nd 和第四個 div 元素在類別名稱值的末尾包含「test」子字串。我們使用結尾帶有 ($=) 通配符的 CSS 選擇器來選擇兩個 div 元素並對其應用邊框、邊距和填充。
<html>
<head>
<style>
[class$="test"] {
border: 2px solid pink;
padding: 5px 10px;
margin: 5px;
}
</style>
</head>
<body>
<h2 id="Using-the-i-ends-with-i-wildcard-CSS-selector-in-CSS"> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div class = "test1"> This is a text with the class name test1.</div>
<div class = "sampletest"> This is a text with the class name sampletest. </div>
<div class = "testdemo"> This is a text with the class name testdemo test. </div>
<div class = "elementtest"> This is a text with the class name elementtest. </div>
</body>
</html>
範例
在下面的範例中，我們使用 id 結尾的 CSS 選擇器，而不是使用類別作為屬性。它示範如何使用其他屬性和通配符 CSS 選擇器來選擇 HTML 元素。
在這裡，我們選擇 id 值末尾包含「name」的所有 HTML 元素，並更改字體樣式和顏色。
<html>
<head>
<style>
[id$="name"] {
color: lightskyblue;
font-style: italic;
font-size: 1.5rem;
}
</style>
</head>
<body>
<h2 id="Using-the-i-ends-with-i-wildcard-CSS-selector-in-CSS"> Using the <i> ends with ($=) </i> wildcard CSS selector in CSS.</h2>
<div id = "firstname"> id == firstname </div>
<div id = "lastname"> id == lastname </div>
<div id = "age"> id == age </div>
<div id = "namestart"> id == namestart </div>
</body>
</html>
使用者學會如何使用類別的通配符 CSS 選擇器。使用者可以使用 contains (*=) CSS 選擇器來取得屬性值中間包含子字串的元素，使用 (^=) CSS 選擇器取得屬性值開頭包含子字串、以 ($ 結尾) 的元素。 =) 結束。
此外，使用者還學習如何將通配符 CSS 選擇器與其他屬性（例如上一個範例中的 id）結合使用。
以上是CSS中的通配符選擇器（*、^和$）用於類的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
