This is the 13th day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021.
preface
In our development, if you look carefully, you will find that when it comes to HTML and CSS, it is all a water selector, a variety of class names cluster out of endless, multifous, basically every tag is at least set on the class name.
And rarely see a label selector, I believe that students also know that the selector will have performance problems, but in the rapid development of the front-end today, the loss of performance problems have long since disappeared.
That’s why this article is about CSS selectors. Furthermore, learning CSS well, selector is also the most basic, right? So let’s get started.
classification
So if you want to make clear what is a selector, a selector classification is what, how to better use and appropriate selector, and skilled and can handy master CSS selector, the first, and indispensable, is we want to understand the choice of classification, is the so-called work must first sharpen his doing.
Therefore, classification seems to be boring, but it is also very important, we must not feel bored, and too lazy to see, must have a good look! I’m watching! (✪ ✪ omega)
Base selector
| The selector | The alias | instructions |
|---|---|---|
| tag | Label selector | Specifies the type of label |
| #id | The ID selector | Specifies the label of the ID |
| .class | Class name selector | Specifies the label for the class name |
| * | Wildcard selector | All types of tags |
Set selector
| The selector | The alias | instructions |
|---|---|---|
| Element1 element2, | Union selector | Specifying multiple elements |
| element.class | Intersection selector | Specifies the node with the class name |
Hierarchy selector
| The selector | The alias | instructions |
|---|---|---|
| elementA elementB | Descendant selector | Descendants of nodes |
| elementA>elementB | Child selector | The child node of a node |
| elementA+elementB | Adjacent sibling selector | The sibling of a node |
| elementA~elementB | Universal sibling selector | The sibling node after the node |
Behavior selector
| The selector | The alias | instructions |
|---|---|---|
| :active | Mouse activated node | |
| :hover | The node over which the mouse floats | |
| ::selection | The selected node |
Ok, that’s all for today. I worked overtime until nine o ‘clock today. To be honest, I feel a little bit tired. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!