Css selector, css

Css selector, css
Introduction to common Selector

The wildcard character specifies all types of single objects in the Document Object Model (DOM.

* {CssCode rules}, where*Indicates all types, including body, div, and td.

The Type selector uses the Document Object Model (DOM) as the selector. That is, you can select an html tag as an object and set style rules.

P {

}

Div {

}

The sub-Layer Control of a container layer is that other objects with the same name are not affected by this rule. objects with the same name must be selected in sequence, from large to small, that is, from the container layer to the child layer.

E1 E2

{

}

E1It refers to the parent layer object, and E2 refers to the small layer or child layer object, that is, the E1 object contains the E2 object

Eg:

Table td

 

{

}

Td p

{

}

Common Layout selector:

IDThe identifier indicates that the unique identifier ID is used as the identifier in the DOM. The ID is preceded by "#" and followed by the ID name, note that the ID Identifier cannot appear twice or more than twice in the style. If it appears, the first occurrence of the identifier will prevail, and others will be ignored.

The class selector is also called the class selector, indicating that a class can be used multiple times in the document.

Start with ".", followed by the class name

Note: The class selector and the type selector are different. The type refers to the tag in html.

The Group selector sets the same style for multiple tags. In different types, it indicates the same style.Separate the delimiters with commas (,) and group the delimiters.

Html, Body

{

}

 

The following table summarizes the above content.

Selector	Expression	Example	Description
Wildcard character	*{CssCode rules}	* {CssCode rules}	*Indicates all types, including body, div, and td.
Type Selector	Take the Document Object Model (DOM) as the selector	P {} Div {}	Select an html tag as an object and set style rules
Include Selector		E1 E2 {  }	E1It refers to the parent layer object, and E2 refers to the small layer or child layer object, that is, the E1 object contains the E2 object
IDSelector	Start,Followed by ID
Class Selector	Start with ".", followed by the class name
Group Selector	Separate the delimiters with commas (,) and group the delimiters.	Html, Body { }	Set the same style for multiple tags. In different types, the same style is displayed.