CSS - 屬性選擇器

上一頁
下一頁

描述

CSS 屬性選擇器允許您根據一個或多個屬性的存在或值來選擇 HTML 元素。它們是定位 HTML 標記中特定元素的強大方法。屬性選擇器用方括號 [] 括起來，並且可以採用多種形式。

以下部分討論了一些使用屬性選擇器的常見方法

CSS [attribute] 選擇器

此選擇器選擇具有指定屬性的元素，而不管其值如何。

語法

[attribute]

示例

以下是一個選擇所有具有“data-toggle”屬性的 HTML 元素的示例

<html>
<head>
<style>
   [data-toggle] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute] Selector</h2>
   <div data-toggle="yes">The div with data-toggle attribute</div>
   <div>The div without data-toggle attribute</div>
   <p data-toggle="no">A paragraph with data-toggle attribute</p>
   <p>A paragraph without data-toggle attribute</p>

</body>
</html>

CSS [attribute="value"] 選擇器

此選擇器選擇具有特定屬性和特定值的元素。

語法

[attribute="value"]

示例

此選擇器選擇所有具有 'data-toggle' 屬性且其值設定為 'yes' 的元素。

<html>
<head>
<style>
   [data-toggle="yes"] {
      background: yellow;
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute="value"] Selector</h2>

   <div data-toggle="yes">The div with data-toggle attribute</div>
   <div>The div without data-toggle attribute</div>
   <p data-toggle="no">A paragraph with data-toggle attribute</p>
   <p>A paragraph without data-toggle attribute</p>

</body>
</html>

CSS [attribute*="value"] 選擇器

此選擇器選擇具有特定屬性且其值包含特定子字串的元素。

語法

[attribute*="value"]

示例

此選擇器選擇所有具有“src”屬性且路徑中包含“images”的元素

<html>
<head>
<style>
   [src*="images"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute*="value"] Selector</h2>

   <img alt="Logo" src = "/css/images/logo.png" />

</body>
</html>

CSS [attribute^="value"] 選擇器

此選擇器選擇具有特定屬性且其值以特定字串開頭的元素。

語法

[attribute^="value"]

示例

此選擇器選擇所有具有“href”屬性且以“https://”開頭的元素

<html>
<head>
<style>
   [href^="https"] {
      background: yellow;
      text-decoration:none;
      color:red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute^="value"] Selector</h2>

   <p><a href="https://tutorialspoint.tw">HTTPS Link</a></p>
   <p><a href="https://tutorialspoint.tw">HTTP Link</a></p>

</body>
</html>

CSS [attribute$="value"] 選擇器

此選擇器選擇具有特定屬性且其值以特定字串結尾的元素。

語法

[attribute$="value"]

示例

此選擇器選擇所有具有“src”屬性且以“.png”結尾的元素

<html>
<head>
<style>
   [src$=".png"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute$="value"] Selector</h2>

   <img alt="Logo" src = "/css/images/logo.png" />

</body>
</html>

CSS [attribute|="value"] 選擇器

此選擇器選擇具有特定屬性且其值以指定的子字串開頭，後跟一個連字元 (-) 的元素。此選擇器通常用於選擇具有特定語言屬性的元素，例如 lang 屬性，這些屬性通常使用連字元來表示語言子程式碼。

語法

[attribute|="value"]

示例

此選擇器選擇所有具有“lang”屬性且以“en”開頭，後跟連字元的元素

<html>
<head>
<style>
   [lang|="en"] {
      border: 2px dashed red;
   }
</style>
</head>
<body>
   <h2>CSS [attribute|="value"] Selector</h2>
   <div lang="en">Hello World in English!</div>
   <div lang="fr">Bonjour tout le monde en français!</div>
   <div lang="es">Hola Mundo en español!</div>
</body>
</html>

CSS [attribute~="value"] 選擇器

此選擇器用於選擇具有特定屬性且其值包含指定單詞的元素。該單詞應為獨立單詞，用空格包圍或位於屬性值的開頭或結尾。

語法

[attribute~="value"]

示例

此選擇器選擇所有具有“class”屬性且包含“beautifyme”單詞的元素

<html>
<head>
<style>
   [class~="beautifyme"] {
   background-color:lightblue;
   border:2px solid red;
      }
</style>
</head>
<body>
   <h2>CSS [attribute|="value"] Selector</h2>
   <div class="beautifyme">div with <b>beautifyme</b> class</div>
   <div class="beautifyme1">div with <b>beautifyme1</b> class</div>
   <div class="beautifyme-2">div with <b>beautifyme-2</b> class</div>
</body>
</html>

href 連結的屬性選擇器

您可以根據其href 屬性對元素進行樣式設定，href 屬性是 <a> 元素上常用的屬性，用於指定連結指向的 URL。

這是一個示例 -

<html>
<head>
<style>
      ul {
      list-style: none;
   }
   a[href] {
      color: rgb(11, 11, 231);
   }
   a[href="css_backgrounds.htm"] {
      color: rgb(224, 152, 18);
   }
   a[href~="css_colors.htm"] {
      color: rgb(51, 255, 0);
   }
   a[href|="css_padding.htm"] {
      color: rgb(0, 255, 255);
   }
   a[href^="css_margins.htm"] {
      color: rgb(255, 0, 55);
   }
   a[href$="css_lists.htm"] {
      color: rgb(255, 230, 0);
   }
   a[href*="css_borders.htm"] {
      color: rgb(112, 108, 108);
   }
</style>
</head>
<body>
   <ul>
      <li> <a href="css_text.htm">CSS Text</a></li>
      <li><a href=".htm">CSS Background</a></li>
      <li><a href="css_colors.htm">CSS Color</a></li>
      <li><a href="css_padding.htm">CSS Padding</a></li>
      <li><a href="css_margins.htm">CSS Margin</a></li>
      <li><a href="css_lists.htm">CSS List</a></li>
      <li><a href="css_borders.htm">CSS Borders</a></li>
   </ul> 
</body>
</html>

輸入的屬性選擇器

屬性選擇器可用於根據特定條件（例如其型別、名稱、值或其他屬性）選擇輸入元素。

這是一個示例 -

<html>
<head>
<style>
   input {
      display: block;
      margin: 10px;
   }
   input[type] {
      border: 1px solid #e0dd29;
   }
   input[placeholder="Password"] {
      border: 1px solid #f00;
   }
   input[name|="emailid"] {
      background-color: rgb(236, 178, 233);
   }
   input[type~="submit"] {
      background-color: rgb(88, 241, 88);
      padding: 10px;
   }
   input[value^="But"] {
      background-color: rgb(236, 149, 68);
      padding: 10px;
   }
   input[type$="box"] {
      border-radius: 5px; 
      height: 50px;
      width: 20px;
   }
   input[type*="adi"] {
      height: 50px;
      width: 20px;
   }
</style>
</head>
<body>
   <input type="text" placeholder="Username">
   <input type="password" placeholder="Password">
   <input type="email" placeholder="Email" name="emailid">
   <input type="submit" placeholder="Submit">
   <input type="button" value="Button">
   <input type="checkbox" placeholder="Checkbox">
   <input type="radio" placeholder="Radio">
</body>
</html>

標題的屬性選擇器

要根據title 屬性對元素進行樣式設定，您可以使用 CSS 屬性選擇器 title 來設定具有包含特定值的 title 屬性的元素的樣式。

這是一個示例 -

<html>
<head>
<style>
   span {
      display: block;
      margin: 10px;
      padding: 5px;
   }
   span[title] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(109, 177, 236);
   }
   span[title="CSS Background"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(250, 163, 192);
   }
   span[title|="CSS Border"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(245, 248, 79);
   }
   span[title^="Mar"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(255, 147, 23);
   }
   span[title$="ght"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(102, 201, 240);
   }
   span[title*="CSS Width"] {
      border: 2px solid rgb(231, 40, 40);
      background-color: rgb(191, 14, 235);
   }
</style>
</head>
<body>
   <span title="CSS Text">A text refers to a piece of written or printed information in the form of words or characters.</span>
   <span title="CSS Background">You can set backgrounds of various HTML elements.</span>
   <span title="CSS Border"> border property is used to create a border around an element.</span>
   <span title="Margin">Setting up a margin around an HTML element.</span>
   <span title="Height">The height property sets the height of an element's content area.</span>
   <span title="CSS Width">The width sets the width of an element's content area.</span>
</body>
</html>

語言的屬性選擇器

您可以使用lang 屬性根據其語言選擇元素。lang 屬性指定元素中包含的文字的語言。

這是一個示例 -

<html>
<head>
<style>
   div[lang] {
      color: red;
   }
   div[lang="fr"] {
      color: blue;
   }
   div[lang~="es"] {
      color: green;
   }
   div[lang|="de"] {
      color: orange;
   }
   div[lang^="it"] {
      color: purple;
   }
   div[lang$="ja"] {
      color: brown;
   }
   div[lang*="zh"] {
      color: teal;
   }
</style>
</head>
<body>
   <div lang="en">Hello World in English!</div>
   <div lang="fr">Bonjour tout le monde en français!</div>
   <div lang="es">Hola Mundo en español!</div>
   <div lang="ja">こんにちは、日本語で世界！</div>
   <div lang="de">Hallo Welt auf Deutsch!</div>
   <div lang="it">Ciao Mondo in italiano!</div>
   <div lang="zh">你好世界，中文！</div>
</body>
</html>

CSS 多個屬性選擇器

CSS 多個屬性選擇器允許您根據多個屬性值選擇元素。它用於定位滿足多個條件的特定元素。

這是一個示例 -

<html>
<head>
<style>
   ul {
      list-style: none;
   }
   a[href] {
      color: rgb(231, 11, 194);
   }
   a[href="css_backgrounds.htm"][href$=".htm"] {
      color: rgb(224, 152, 18);
   }
   a[href="css_colors.htm"] {
      color: rgb(51, 255, 0);
   }
</style>
</head>
<body>
   <ul>
      <li><a href="css_text.htm">CSS Text</a></li>
      <li><a href="css_backgrounds.htm">CSS Background</a></li>
      <li><a href="css_colors.htm">CSS Color</a></li>
   </ul> 
</body>
</html>

帶有同級組合器的 CSS 屬性選擇器

CSS 屬性選擇器和同級組合器可以一起使用，根據元素的屬性及其與其他元素的關係來選擇特定元素。

  • 普通同級組合器 (~) - 此組合器選擇在指定元素之後的所有同級元素，但不與其直接相鄰。

    語法

    selector1 ~ selector2 {
   /* CSS styles */
}

  • 相鄰同級組合器 (+) - 此組合器選擇直接位於指定元素之後的元素。

    語法

    selector1 + selector2 {
   /* CSS styles */
}

以下示例演示了相鄰同級組合器 (+) 選擇標題之後緊隨其後的段落，而普通同級組合器 (~) 選擇標題之後的 <div> -

<html>
<head>
<style>
   h2 + p { 
      font-weight: bold;
      color:blue;
   }
   h2 ~ div {
      color: red;
   }
</style>
</head>
<body>
   <h2>CSS Background</h2>  
   <p>You can set backgrounds of various HTML elements.</p>
   <div>
      <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   </div>
   <p>There are many variations of passages of Lorem Ipsum available.</p>
</body>
</html>
列印頁面
上一頁
下一頁
廣告