CSS屬相選擇器

CSS屬相選擇器是一種選擇器，它可以幫助我們根據(jù)元素的屬性值來選擇元素。<br>
下面我們來看一些例子，說明如何使用CSS屬相選擇器。

選擇一個具有特定屬性值的元素

例如，我們有一個 HTML 元素:<br>
<p class="example">這是一個例子</p><br>
我們可以將其選中，使用下面的 CSS:<br>
p[class="example"] {<br>
    color: red;<br>
}

選擇一個屬性具有特定前綴的元素

有時候，一個元素具有一個或多個屬性具有相同前綴。我們可以使用 CSS 屬相選擇器來選擇這樣的元素。<br>
例如，我們有以下 HTML:<br>
<img src="example.jpg" alt="example"><br>
我們可以將其選中，使用下面的 CSS:<br>
img[alt^="ex"] {<br>
    border: 1px solid black;<br>
}

選擇一個屬性具有特定后綴的元素

同樣，我們也可以使用 CSS 屬相選擇器來選擇一個具有特定后綴的元素。<br>
例如，我們有以下 HTML:<br>
<a href="example.html">這是一個例子</a><br>
我們可以將其選中，使用下面的 CSS：<br>
a[href$=".html"] {<br>
    text-decoration: underline;<br>
}

選擇一個屬性值包含特定字符串的元素

我們也可以使用 CSS 屬相選擇器來選擇一個元素，它具有某個屬性值包含特定字符串的屬性。<br>
例如，我們有以下 HTML:<br>
<amp-img src="example.jpg" alt="example"><br>
我們可以將其選中，使用下面的 CSS：<br>
amp-img[alt*="ex"] {<br>
    width: 50%;<br>
}