CSS selector selector is the basis for our CSS web page layout. What exactly are CSS selectors and how to use them reasonably? Selectors can be divided into three categories. Except for the first category of HTML selector, we can name the other two categories by ourselves. When naming, pay attention to including semantics or add necessary comments to make our code clearer and easier to read. read.
HTML selector tag selector
HTML selector is an HTML tag, such as: DIV, TD, P, H1, etc. If you define them with CSS, the properties of this tag in the page controlled by the CSS article will be displayed according to your definition.
For example, if we want the color of H1 to be red, then: H1 {color: red}. Here we learn a feature of CSS, which can define several selectors in a rule. Such as: H1, H2, TD {color: red}. This definition allows all H1, H2, and TD to be red. In specific use, several attributes with the same settings can be combined and written to reduce our code.
Class selector class selector
There are two types of Class selector, one is called related class selector, which is related to an HTML tag. Its syntax is tag.Classname {property:value}. For example: we want to set the color of some but not all H1 to red H1.redone {color: red}: the first H1 is red, but the second one is not.
The second type is an independent class selector. It can be used by any HTML tag. Its syntax is as follows. Classname {property: value} If we have the following definition. blueone {color: blue} then we can apply it to different tags. It is very obvious that class selector gives us more freedom and room to play.
ID selector ID selector
In fact, the function of ID selector is very similar to that of independent class selector. The difference is that their syntax and usage are different, and they are helpful for javascript to manipulate HTML elements. In our layout, we often use ID selectors to define different structural areas.
Its syntax is as follows #IDname {property:value}. Suppose we have the following definition #yelowone {color: yellow}. We can apply this definition to any tag with the same ID name, such as: text here. You may think that since the ID selector has the same function as the independent class selector, why do both exist? HTML elements with IDs can be manipulated by JavaScript.