CSS中的通配符選擇器（*、^和$）用於類-css教學-PHP中文網

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> 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> 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> 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> 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中文網其他相關文章！