屬性選擇器

小世界的野孩子 2020-02-14

展開全文

屬性選擇器

作用：可以根據(jù)元素中的屬性或屬性值來選取指定元素。
語法：

[屬性名] 選取含有指定屬性的元素
[屬性名="屬性值"] 選取含有指定屬性值的元素
[屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
[屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結尾的元素
[屬性名*="屬性值"] 選取屬性值以指定內(nèi)容結尾的元素

舉例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p[title] {
           background-color: orange;
        }
    </style>
</head>
<body>
    <!-- title屬性-->
    <p title>我是一個段落</p>
    <p>我是一個段落</p>
</body>
</html>

說明：

title屬性：可以給任何標簽指定。當鼠標移入到元素上時，元素中的title屬性值將會作為提示文字顯示。

結果：
為含有title屬性的元素設置背景顏色。

舉例2：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p[title^="ab"] {
           background-color: orange;
        }
    </style>
</head>
<body>
    <p title="abc">我是一個段落</p>
    <p>我是一個段落</p>
</body>
</html>

結果：為title屬性值中以'ab'開頭的元素設置背景顏色。