css: selector

One, the label selector

Tag selector refers to the use of HTML tag names as selectors, categorized by tag names, and specify a unified CSS style for a certain type of tag on the page.

The basic syntax format is as follows:

标签名{
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3;
	....
}  

Features:

1. The tag selector can quickly unify styles for the same type of tags on the page, but this is also its shortcoming, and it can't design differentiated styles.
2. The tag selector can select all tags of a certain type.

Second, the class selector

The class selector is identified by "." (dot notation), followed by the class name, and its basic syntax format is as follows:

.类名{
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3; 
}

When the label is called, use class="class name".

Advantages of class selectors:
You can define separate or identical styles for element objects. You can select one or more tags.

Tips:

1. Long names or phrases can use horizontal lines to name the selector.
2. It is not recommended to use the "_" underscore to name CSS selectors.
3. Don't name it purely with numbers, Chinese, etc., try to use English letters to represent it.

Three, multiple class name selector

We can assign multiple class names to the label to achieve more selection purposes. The multi-category name selector is still more used when the later layout is more complicated.

note:

1. The style display effect has nothing to do with the order of the class names in the HTML elements, but is related to the up and down order of CSS style writing.
2. Separate each class name with a space.

Four, id selector (the highest priority)

The id selector uses "#" for identification, followed by the id name, and its basic syntax format is as follows:

#id名{
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3; 
}

In this syntax, the id name is the id attribute value of the HTML element. Most HTML elements can define the id attribute. The id value of the element is unique and can only correspond to a specific element in the document. The usage is basically the same as the class selector.

The difference between id selector and class selector:

W3C stipulates that id objects with the same name are not allowed on the same page, but classes with the same name are allowed.
The class selector (class) is like a person's name, which can be reused many times, such as: Zhang Wei, Wang Wei, Li Wei, Li Na.
The id selector is like a person's ID number, which is unique in China and must not be repeated.

Five, wildcard selector

The wildcard selector is represented by the "*" sign. It has the widest scope of all selectors and can match all elements on the page. The basic syntax format is as follows:

* { 
	属性1:属性值1; 
	属性2:属性值2; 
	属性3:属性值3; 
}

Use wildcard selectors to define CSS styles and clear the default margins of all HTML tags.

* {
	margin: 0;      /* 定义外边距*/
    padding: 0;     /* 定义内边距*/
}

Six, compound selector

(1), intersection selector

The intersection selector is composed of two selectors, the first is a label selector, the second is a class selector, and there can be no spaces between the two selectors, such as h3.special.

(2), union selector

Union selector (CSS selector grouping) is made up of selectors connected by <strong style="color:#f00">comma</strong>. Any form of selector (including label selector, class selection) ID selector, etc.) can be used as part of the union selector. If the styles defined by some selectors are exactly the same, or partially the same, you can use the union selector to define the same CSS styles for them.

(3), descendant selector [Selector 1 Selector 2], separated by spaces

The descendant selector is also called the containment selector. It is used to select the descendants of an element or element group. It is written by writing the outer label at the front and the inner label at the back, separated by a space in the middle. When the tags are nested, the inner tag becomes the descendant of the outer tag.

(4), child selector 【Selector 1> Selector 2】
The child element selector can only select elements that are child elements of a certain element. The writing method is to write the parent label at the front, the child label at the back, and connect with one in the middle. Note that there is a space on the left and right sides of the symbol.

Seven, pseudo-class selector

Link pseudo-class selector :

:link 	    /* 未访问的链接 */
:hover   	/* 鼠标移动到链接上 */
:active 	/* 选定的链接 */
:visited 	/* 已访问的链接 */

Note that when writing, their order should not be reversed as much as possible, in accordance with the order of lhav.