css_4_复合选择器_属性选择器

属性选择器

• 作用：选中属性值符合一定要求的元素。
• 注意：id选择器和类选择器是属性选择器的两个特例。

第一种写法

具有title属性的元素

• 作用：选中具有某个属性的元素。
• 结构：

[属性名] { }

• 举例：

        /* 第一种写法：选中具有title属性的元素 */
        [title] {
            color: blue;
        }

    <div title="feature">这是在说属性选择器。</div>
    <div title="feature1">这是在说属性选择器。</div>

第二种写法

选中包含某个属性元素。

• 作用：选中属性值等于指定值的元素。
• 结构：

[属性名=“值”]

• 举例：

        /* 第二种写法：选中具有title属性，且属性值等于feature1的元素 */
        [title="feature1"] {
            color: blueviolet;
        }

    <div title="feature">这是在说属性选择器。</div>
    <div title="feature1">这是在说属性选择器。</div>
    <div title="features">这是在说属性选择器。</div>

第三种写法

选中包含某个属性元素。

• 作用：选中属性值以指定值开头的元素。
• 结构：

[属性名^=“值”]

• 举例：

        /* 第三种写法：选中具有title属性，且属性值以“f”开头的元素 */
        [title^="f"] {
            color: brown;
        }

    <div title="feature">这是在说属性选择器。</div>

第四种写法

选中包含某个属性元素。

• 作用：选中属性值以指定值结尾的元素。
• 结构：

[属性名$=“值”]

• 举例：

        /* 第四种写法：选中具有title属性，且属性值以“s”结尾的元素 */
        [title$="s"] {
            color: chocolate;
        }

    <div title="feature1">这是在说属性选择器。</div>
    <div title="features">这是在说属性选择器。</div>
    <div title="feature">这是在说属性选择器。</div>

第五种写法

选中包含某个属性元素。

• 作用：选中属性值包含特定值的元素。
• 结构：

[属性名*=“值”]

• 举例：

       /* 第五种写法：选中具有title属性，且属性值包含“r”的元素 */
        [title*="r"] {
            color: chartreuse;
        }

    <div title="feature">这是在说属性选择器。</div>
    <div title="feature1">这是在说属性选择器。</div>