Tips: What are CSS selectors? How to use it rationally?

css| Tips

The CSS selector selector is the basis for our CSS page layouts. CSS selector In the end what, how to use it rationally? Selectors can be divided into three categories, except for the first class of HTML selector, we can name the other two classes, and when naming, be aware of the semantics, or add the necessary annotations to make our code clearer and easier to read.

　　HTML Selector Tag Selector

HTML selector is HTML tags, such as: Div,td,p,h1 and so on, if you define them with CSS, in the CSS article control of the page of the nature of the label according to your definition to show.

For example, we want to call H1 color is red, then: H1 {color:red}. Here we learn a CSS feature that can define several selector in a rule. such as: H1, H2, TD {color:red}. This definition allows all H1, H2, and TD colors to be red. In the specific use, you can put several settings the same belong to the merged to write, reduce our code.

　　Class Selector classes selector

Class selector have two types, one called related class selector, which is associated with an HTML tag, and its syntax is tag. Classname {Property:value}. For example: We would like to set some rather than all H1 color is red h1.redone {color:red} then: 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} Then we can apply it to a different label. It's very obvious that class selector gives us more freedom and space to play.

　　ID Selector ID Selector

ID selector is actually similar to the function of a standalone class selector. The difference is that they differ in their syntax and usage and are helpful for JavaScript manipulating HTML elements. We are in the layout, the definition of different structure areas, often with the ID selector.

Its syntax is as follows #idname {property:value}. If we have the following definition #yelowone {color:yellow}. We can use this definition to any label that has the same ID name, such as: text Here you may think that since ID selector and independent class selector function, why both exist? HTML elements with IDs can be manipulated by JavaScript.