5. Attribute selector

The following common HTML Code

    <p title="abc"> This is the first one p</p>
    <p title="abcd"> This is the second p</p>
    <p title="hello"> This is the third p</p>
    <p> This is the fourth p</p>
    <div title="abc"> This is a div Contents of Li </div>

One 、 Attribute selector Syntax 1：[ Property name ] Select the element with the specified attribute .

CSS Code ：

        /*
            [ Property name ] Select the element with the specified attribute .
        */
        [title]{
            color: red;
        }

Running results ：

---

Two 、 Attribute selector Syntax 2：[ Property name = Property value ] Select the element that contains the specified attribute and attribute value

CSS Code ：

        /*
            [ Property name = Property value ] Select the element that contains the specified attribute and attribute value 
        */
       [title=abc]{
            color: red;
        } 

Running results ：

---

3、 ... and 、 Attribute selector Syntax 3：[ Property name ^= Property value ] Select the element whose attribute value begins with the specified value

CSS Code ：

        /*
            3 [ Property name ^= Property value ] Select the element whose attribute value begins with the specified value 
        */
         [title^=abc]{
            color: red;
        }

Running results ：

---

Four 、 Attribute selector Syntax 4：[ Property name $= Property value A] Select attribute value to attribute value A Ending element

CSS Code ：

        /*
            4 [ Property name $= Property value ] Select the element whose attribute value ends with the specified value 
        */
        [title$=c]{
            color: red;
        }

Running results ：

 

 

---

5、 ... and 、 Attribute selector Syntax 5：[ Property name *= Property value A] Select include attribute value as attribute value A All attribute elements of

CSS Code ：

        /*
            5 [ Property name *= Property value ] Select all elements with a certain value in the attribute value 
        */
        [title*=e]{
            color: red;
        }

Running results ：