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

Source: Internet
Author: User
Tags define definition html tags
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.



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.