5、属性选择器

以下公用如下的HTML代码

    <p title="abc">这是第一个p</p>
    <p title="abcd">这是第二个p</p>
    <p title="hello">这是第三个p</p>
    <p>这是第四个p</p>
    <div title="abc">这是div里的内容</div>

一、属性选择器语法1：[属性名]选择含有指定属性的的元素。

CSS代码：

        /*
            [属性名]选择含有指定属性的的元素。
        */
        [title]{
            color: red;
        }

运行结果：

---

二、属性选择器语法2：[属性名=属性值]选中含有指定属性和属性值的元素

CSS代码：

        /*
            [属性名=属性值]选中含有指定属性和属性值的元素
        */
       [title=abc]{
            color: red;
        } 

运行结果：

---

三、属性选择器语法3：[属性名^=属性值]选择属性值以指定值开头的元素

CSS代码：

        /*
            3 [属性名^=属性值]选择属性值以指定值开头的元素
        */
         [title^=abc]{
            color: red;
        }

运行结果：

---

四、属性选择器语法4：[属性名$=属性值A]选择属性值以属性值A结尾的元素

CSS代码：

        /*
            4 [属性名$=属性值]选择属性值以指定值结尾的元素
        */
        [title$=c]{
            color: red;
        }

运行结果：

 

 

---

五、属性选择器语法5：[属性名*=属性值A]选择包含属性值为属性值A的所有属性元素

CSS代码：

        /*
            5 [属性名*=属性值]选择属性值中含有某值的所有元素
        */
        [title*=e]{
            color: red;
        }

运行结果：