<! DOCTYPE html>
/*id selector: Select the only element in the page, it is recommended that the same ID identifier is allowed only once */
#item1 {/*background-color:red;*/}
/* Class selector: Select all elements in the page that have the same type of style */
. Green {/*background-color:lightgreen;*/}
/* Parent-Child selector: The element is a hierarchical relationship, the selected element has a common parent */
UL li {/ * * Hierarchical relationship with a space to denote */color:white;}
/* Wildcard selector: Select the element at all levels below the specified parent */
UL * {/*border:1px solid black;*/}
/* child element selector;: Selects all LI elements under the parent element, equivalent to the tag selector, so its priority is lower than class,id*/
ul > li { /* equivalent to: ul > * {} *//*background-color:blue;*/}
/* Adjacent Sibling selector +: Select only the first sibling node relative to it */
#item2 + li {/*background-color:black;/* Only a 7th ball turns black */*/}
/* All Brothers Selector ~: Select all sibling nodes relative to it */
#item2 ~ li {/*background-color:coral;/* bright orange */*/}</style>