CSS various selector summary

First of all, what is a selector. In an HTML page there will be a lot of elements, different elements may have different styles, some elements need to set the same style, the selector is used to find the specific elements from the HTML page, after the element can be found to set the style. Selectors specify a scope for the style rule.

Basic Selector Tag Selector

As the name implies, the element is selected by tag name:

• Tag Selector can select all tag elements, such as Div,ul,li, p, etc.
• No matter how deep the label is hidden, you can select
• Select all, not one, so say "commonalities" rather than "features"

Instance:

p {  color:red;}

Set all the P tags to the font color red.

ID Selector

Select an element through the element's ID value:

• ID cannot be duplicated on the same page
• Any label can set the ID
• ID naming specification to have a numeric underscore in letters-case sensitive to AA and AA

Example:

#i1 {  color:red;}

i1sets the element font color of the ID value to red.

Class Selector

Select elements by Style class:

• A class is a class;class similar to an ID, and any tag can be added to a class, but a class can be repeated, categorized
• Multiple classes can be carried in the same label, separated by a space
• The use of the class can determine the front-end engineer's CSS level exactly how awesome, to use more, must have "public class" concept

Summarize:

• Don't try to use a class to finish writing our page. This tag takes more than one class and sets the style together.
• Each class should be as small as possible, with a public concept that allows more labels to be used
• Do you use ID or class?
  • Answer: Use the class as much as possible. Unless some special cases can be used with ID
  • Reason: The ID is usually used in JS. In other words, JS is the ID to get to the label

Example:

. c1 {  color:red;}

.c1 Sets the font color of the elements contained in all style classes to red.

Universal Selector

Use to * Select all elements:

* {  color:black;}

For reasons of low efficiency, generally not

Combo Selector Property Selector Group selector pseudo-class selector precedence of pseudo-element selector selector

CSS various selector summary