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+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告