資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中有沒有選擇包含特定文字的元素的選擇器？
要選擇在 CSS 中包含特定文字的元素，我們可以使用 CSS 屬性選擇器。我們可以使用預定義屬性，也可以在 HTML 文件中新增自定義屬性。
在本文中，我們有一些帶有某些屬性的 div 元素，我們的任務是在 CSS 中選擇包含特定文字的元素。
選擇包含特定文字的元素的方法
以下是本文將討論的在 CSS 中選擇包含特定文字的元素的方法列表，其中包含分步說明和完整的示例程式碼。
使用屬性值選擇器
為了在 CSS 中選擇包含特定文字的元素，我們使用了 CSS **屬性值** 選擇器。
- 我們使用了 **"[app_name="app1"]"** 來選擇具有屬性 **app_name** 且屬性值為 **app1** 的 div。類似地，我們選擇了屬性值為 app2 的 div。
- 然後，我們使用了 CSS 顏色 和 字型大小 屬性來設計所選元素。
示例
這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS **屬性值** 選擇器選擇包含特定文字的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[app_name="app1"] {
color: #04af2f;
font-size: 1.3rem;
}
[app_name="app2"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>attribute
</strong> selector to change the text color
and increase the font size of div element.
</p>
<div app_name="app1">This is a div with app1.</div>
<div app_name="app2">This is a div with app2.</div>
<div app_name="app3">This is a div with app3.</div>
<div app_name="app4">This is a div with app4.</div>
</body>
</html>
使用屬性包含單詞 (~=) 選擇器
在這種選擇包含特定文字的元素的方法中，我們使用了 CSS **包含單詞 (~=) 選擇器**。它選擇具有特定屬性且值包含指定單詞的元素。
- 我們使用了 **"[type~="app"]"** 來選擇所有具有屬性名稱 **type** 且包含單詞 **app** 的 div 元素。
- 然後，我們使用了 CSS 顏色和字型大小屬性來設計所選元素。
示例
這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS **包含單詞 (~=) 選擇器** 選擇包含特定文字的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type~="app"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<p>
In this example we have used <strong>[type~="app"]
</strong> selector to change the text color and
increase the font size of div element.
</p>
<div type="web app">This div is of type app.</div>
<div type="mobile product">This div is of type product.</div>
<div type="desktop tutoril">This div is of type tutorial.</div>
<div type="device app">This div is of type app.</div>
</body>
</html>
使用屬性包含子字串 (*=) 選擇器
在這種選擇包含特定文字的元素的方法中，我們使用了 CSS **包含子字串 (*=) 選擇器**。它選擇具有特定屬性且值包含特定子字串的元素。
- 我們使用了 **"[class*="test"]"** 來選擇所有類名包含子字串 **test** 的 div 元素。
- 然後，我們使用了 CSS 顏色和字型大小屬性來設計所選元素。
示例
這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS **包含子字串 (*=) 選擇器** 選擇包含特定文字的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[class*="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h3>
Selecting Elements Containing Certain Text in CSS
</h3>
<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 having test
in it's class name.
</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 **以開頭 (^=) 選擇器**。它選擇具有特定屬性且值以特定字串開頭的元素。
- 我們使用了 **"[type^="test"]"** 來選擇所有屬性名稱 **type** 以單詞 **test** 開頭的 div 元素。
- 然後，我們使用了 CSS 顏色、邊框 和 最大寬度 屬性來設計所選元素。
示例
這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS **以開頭 (^=) 選擇器** 選擇包含特定文字的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type^="test"] {
color: #04af2f;
border: 2px solid black;
max-width: fit-content;
}
</style>
</head>
<body>
<h2>
Selecting Elements Containing Certain Text in CSS
</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 type="test1">
This is a div with the class name test1.
</div>
<div type="sampletest">
This is a div with the class name sampletest.
</div>
<div type="testdemo">
This is a div with the class name test demo.
</div>
<div type="element">
This is a div with the class name element.
</div>
</body>
</html>
使用屬性以結尾 ($=) 選擇器
在這種選擇包含特定文字的元素的方法中，我們使用了 CSS **以結尾 ($=) 選擇器**。它選擇具有特定屬性且值以特定字串結尾的元素。
- 我們使用了 **"[type^="test"]"** 來選擇所有屬性名稱 **type** 以單詞 test 結尾的 div 元素。
- 然後，我們使用了 CSS 顏色和字型大小屬性來設計所選元素。
示例
這是一個完整的示例程式碼，實現了上述步驟，以使用 CSS **以結尾 ($=) 選擇器** 選擇包含特定文字的元素。
<html>
<head>
<title>
Selecting Elements Containing Certain Text in CSS
</title>
<style>
[type$="test"] {
color: #04af2f;
font-size: 1.3rem;
}
</style>
</head>
<body>
<h2>
Selecting Elements Containing Certain Text in CSS
</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 type="test1">
This is a div with the id name test1.
</div>
<div type="sampletest">
This is a div with the id name sampletest.
</div>
<div type="testdemo">
This is a div with the id name test demo.
</div>
<div type="elementtest">
This is a div with the id name element test.
</div>
</body>
</html>
結論
在本文中，我們瞭解了五種不同的方法來選擇 CSS 中包含特定文字的元素，它們分別是：使用 **屬性值** 選擇器、使用 **包含單詞 (~=) 選擇器**、使用 **包含子字串 (*=) 選擇器**、使用 **以開頭 (^=) 選擇器** 以及使用 **以結尾 ($=) 選擇器**。
更新於：2024年10月1日
6K+ 閱讀量
廣告