資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中的萬用字元選擇器（*, ^ 和 $）用於類
CSS 萬用字元選擇器允許我們選擇 HTML 元素，該元素在特定屬性（例如類、id 或其他屬性）的值中包含特定子字串。當樣式應用於多個元素且其屬性具有共同模式時，這很有用。
在本文中，我們將學習 CSS 中的萬用字元選擇器及其型別，如下所述。
包含（*=）萬用字元選擇器
CSS 包含（*=）萬用字元選擇器查詢其屬性值包含指定子字串的所有 HTML 元素。當您希望選擇屬性值中任何位置都包含指定子字串的元素時，這很有用。
- 我們建立了四個div 元素，其文字內容與其類名相對應。
- 在 CSS 中，我們使用了“class*="test"”來選擇所有類名包含“test”作為子字串的 div 元素。
- 然後，我們使用了顏色和字型大小屬性來更改所選 div 元素的文字顏色和字型大小。
示例
這是一個使用包含（*=）萬用字元選擇器實現上述步驟以更改 div 元素的文字顏色和字型大小的示例程式碼。
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Contains (*=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div class="test1">
This is a div with the class name test1.
</div>
<div class="sampletest">
This is a div with the class name sampletest.
</div>
<div class="demo">
This is a div with the class name demo.
</div>
<div class="element">
This is a div with the class name element.
</div>
</body>
</html>
以（^=）萬用字元選擇器開頭
CSS 以（^=）開頭萬用字元選擇器查詢其屬性值以指定子字串開頭的所有 HTML 元素。當您希望選擇屬性值以特定字串開頭的元素時，這很有用。
- 我們建立了四個 div 元素，其文字內容與其類名相對應。
- 在 CSS 中，我們使用了“class^="test"”來選擇所有類名以“test”作為子字串開頭的 div 元素。
- 然後，我們使用了顏色和邊框屬性來更改文字顏色併為所選 div 元素新增邊框。
示例
這是一個使用以（^=）開頭萬用字元選擇器實現上述步驟以更改 div 元素的文字顏色和字型大小的示例程式碼。
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[class^="test"] {
color: #04af2f;
border: 2px solid black;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Starts with(^=)
</strong> wildcard selector to change the text color
and add the border to div element.
</p>
<div class="test1">
This is a div with the class name test1.
</div>
<div class="sampletest">
This is a div with the class name sampletest.
</div>
<div class="testdemo">
This is a div with the class name test demo.
</div>
<div class="element">
This is a div with the class name element.
</div>
</body>
</html>
以（$=）萬用字元選擇器結尾
CSS 以（$=）結尾萬用字元選擇器查詢其屬性值以指定子字串結尾的所有 HTML 元素。當您希望選擇屬性值以特定字串結尾的元素時，這很有用。
- 我們建立了四個 div 元素，其文字內容與其 id 名字相對應。
- 在 CSS 中，我們使用了“id$="test"”來選擇所有 id 以“test”作為子字串結尾的 div 元素。
- 然後，我們使用了顏色和字型大小屬性來更改所選 div 元素的文字顏色和字型大小。
示例
這是一個使用以（$=）結尾萬用字元選擇器實現上述步驟以更改 div 元素的文字顏色和字型大小的示例程式碼。
<html>
<head>
<title>
Wildcard Selectors in CSS for classes
</title>
<style>
[id$="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Wildcard Selectors in CSS for classes
</h2>
<p>
In this example we have used <strong>Ends with ($=)
</strong> wildcard selector to change the text color
and increase the font size of div element.
</p>
<div id="test1">
This is a div with the id name test1.
</div>
<div id="sampletest">
This is a div with the id name sampletest.
</div>
<div id="testdemo">
This is a div with the id name test demo.
</div>
<div id="elementtest">
This is a div with the id name element test.
</div>
</body>
</html>
結論
在本文中，我們學習並瞭解了類別的萬用字元 CSS 選擇器及其使用方法。我們可以使用包含（*=）CSS 選擇器獲取屬性值包含子字串的元素，使用以（^=）開頭CSS 選擇器獲取屬性值開頭包含子字串的元素，以及使用以（$=）結尾CSS 選擇器獲取屬性值結尾包含子字串的元素。
更新於： 2024年8月14日
11K+ 次瀏覽
廣告