CSS (ii)

CSS Selector

There are several common selectors:

1. Tag Selector

The tag selector, which has a large range of effects, is recommended to be applied to the hierarchy selector as much as possible.
Example:

* {margin:0; padding:0}div{color:red}   <div>....</div>   <!--corresponds to the above two styles--><div class= "box" >....</div>   <!--corresponds to the above two styles -

2. ID Selector

By selecting an element with an ID name, the ID name of the element cannot be duplicated, so a style setting item can only correspond to the previous element of the page, cannot be reused, and the ID name is generally used for the program, so it is not recommended to use the ID as a selector.
Example:

#box {color:Red} <div id= "box" >....</div>   <!--corresponds to one of the above styles, other elements do not allow this style--

3. Class Selector

By selecting elements through the class name, a class can be applied to multiple elements, multiple classes can be used on an element, flexible and reusable, and is the most applied selector in CSS.
Example:

. Red {color:Red} . Big {font-size:20px} . Mt10 {margin-top:10px} <div class= "Red" >....</div>

4. Level Selector

The main application is to select child elements under the parent element, or sub-elements below the child element, which can be used in conjunction with the LABEL element, reduce the naming, and also prevent naming collisions through hierarchies.
Example:

. Box span {color:Red} . box. Red {color:Pink} . Red {color:Red} <div class= "box" >    <span>....</span>    <a href= "#" class= "Red" >....</a> </div>

5. Group Selector

Multiple selectors, you can use the group selector if you have the same styling settings.
Example:

. Box1,.box2,.box3 {width:100px; height:100px}. box1{background:Red}. box2{background :Pink}. box2{background:Gold}<div class= "Box1" ..... </div><div class= "Box2" >....</div><div class= "Box3" >....</div>

6. Pseudo-class and pseudo-element selectors

Common pseudo-class selectors have hover that represent the state of the mouse hovering over an element, and pseudo-element selectors have before and after, which can be used to insert content into an element by style.

. Box1:hover {color:Red} . Box2:before {content:' textat the beginning of the line ';} . Box3:after {content:' End of line text ';} <div class= "box1" >....</div><div class= "Box2" >....</div><div class= "Box3"; </div>

CSS (ii)