Property selector

CSS: Input [type][name]{background-color: blue; } html: <input type="text" name="" id="">Copy the code

~ selector

CSS: h1~p {background-color:Red; } HTML: < H1 >11111111111111</ H1 > <p>22222222222222</p> <p>33333333333333</p> <p>44444444444</p> </div> <p>555</p>Copy the code

Intersection selector

You must have both classes on the tag to select CSS:.one.two{color: blue; <div class="one two"> </div>Copy the code

+ adjacent selector

CSS: h1+p {background-color:Red; } HTML:  <div> <p>3333</p> <h1>11111111111111</h1> <p>22222222222222</p> <p>33333333333333</p> <div> <p>44444444444</p> </div> </div>Copy the code

Select by property value

1. p[lang="en"]{color: red; } only en <p lang="en">Hello! </p> <p lang="en-us">Greetings! </p> 2. p[lang|="en"]{color: red; } Select the element that has the attribute lang and the value of the attribute of lang begins with en or en- <p lang="en-au">G'day! </p> 3. p[lang~=en]{color: red; } Select the lang attribute value as en, and the lang attribute value can also be other values <p lang="en">Hello! </p> <p lang="en us">Greetings! </p>Copy the code