Property selector: Select the specified element based on the attribute of the element
Syntax: [Property name] Select the element with the specified attribute
- [Property Name = property value]: Select an element with a property value equal to a specified value
- [Property name ^= property value]: Select an attribute value to specify the element at the beginning of the content
- [Property name $= property value]: Select an attribute value to specify the element at the end of the content
- [Property name *= property value]: Select the element in the attribute value that contains the specified content
Demo: (Note: This awkward verse must not have been written by me)
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title></title> <styletype= "Text/css"> /*[Property Name = property value]: Select an element with a property value equal to a specified value*/h2[title= "ABCDE"]{Color:Red; } /*[Property name ^= property value]: Select an attribute value to specify the element at the beginning of the content*/h3[title^= "O"]{Color:Green; } /*[Property name $= property value]: Select an attribute value to specify the element at the end of the content*/h4[title$= "C"]{Color:Blue; } /*[Property name *= property value]: Select the element in the attribute value that contains the specified content*/h1[title*= "DF"]{Color:Blue; } </style> </Head> <Body> <!--[email protected] Time: 2017-03-18 Description: Title is when the mouse moves up, suspended in the above content - <H1title= "DFC">To the daughter's book</H1> <H2title= "ABCDE">Pot Twombly Writing poetry is important</H2> <H3title= "OPQ">Their craft is more important than men.</H3> <h4title= "CDE">Chest and waist and buttocks are more important than face</h4> <h5>Strong inside, son of a.</h5> <h6>is more important than anything.</h6> <BR/> <BR/> <H1title= "CDE">To the daughter's book</H1> <H2title= "OPQ">Pot Twombly Writing poetry is important</H2> <H2title= "ABCDE">Their craft is more important than men.</H2> <h4title= "ABC">Chest and waist and buttocks are more important than face</h4> <h5>Strong inside, son of a.</h5> <h6>is more important than anything.</h6> <BR/> <BR/> <H1title= "CDE">To the daughter's book</H1> <H1title= "DFDF">To the daughter's book</H1> </Body></HTML>
:
Front-end learning-Css--Attribute Selector