How can I reasonably use CSS selector separators?

CSS selector is the basis for CSS webpage layout. What are CSS selector and how to use it properly? There are three types of delimiters. Apart from the first type of HTML selector, we can name the other two types by ourselves. When naming them, note that they contain semantics or add necessary comments, make our code clearer and easier to read.
HTML selector tag selector
HTML selector is HTML tags, such as DIV, TD, P, H1, etc. If you define them using CSS, on the page controlled by the CSS document, the nature of the tag is displayed according to your definition.
For example, if we want the H1 color to be red, then: H1 {color: red }. Here we will learn the characteristics of a CSS, which can define several selectors in a rule. For example, H1, H2, TD {color: red }. This definition can make all H1, H2, and TD colors red. In specific use, you can combine several identical settings to write and reduce our code.
Class selector
There are two types of Class selector. One is related to an HTML tag. Its syntax is tag. Classname {property: value }. For example, if we want to set red H1.redone {color: red} colors instead of all H1 colors, the first H1 is red, and the second is not.
The second type is independent class selector. It can be applied by any HTML tag. Its syntax is as follows. Classname {property: value}. If we have the following definition: blueone {color: blue}, we can apply it to different labels. Obviously, class selector gives us more freedom and space to use.
ID selector
ID selector is similar to the function of independent class selector. The difference is that their syntax and usage are different, and it is helpful for javascript to manipulate HTML elements. In the layout, we often use the ID selector to define different structural areas.
Its syntax is as follows # IDname {property: value }. Suppose we have the following definition # yelowone {color: yellow }. We can use this to define any tag with the same ID name, such as text here. You may think that since the ID selector and the independent class selector functions the same, why do they both exist? HTML elements with IDs can be manipulated by JavaScript.
For the difference between class and ID, see here
Use id or class.