What are CSS selectors? Full summary of CSS selectors (with code)

What are CSS selectors? CSS basic selectors include a wildcard selector, a type selector, a property selector, an ID selector, a class selector, a include selector and a sub-object selector, and a special mix of selectors, and then we'll take a look at these selectors separately.

One. Wildcard selector (Universal Selector):

Syntax: *

Description: 1.* represents a wildcard character, indicating that all
2. Format: *{Style list}
3. For the entire page or site fonts, margins, backgrounds, etc.

Example: In addition to specifying that the elements contained in the P tag use the style specified in the P curly braces, the others use the style specified in the curly braces.

<! DOCTYPE html >
The output is as follows:


Two. Type selector (selectors):

Syntax: E1

Description: 1. Type selector for setting specific HTML element styles
2. Element names are case insensitive
3. Format: HTML element name {Style list}

Example: p Specifies the style in curly braces, so the following label type P is used for its style, and the following p is the same.

<! DOCTYPE html >
The output is as follows:


Three. Property selector (Attribute selectors):

Syntax: 1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]

Description: The HTML element style used to define a specific property value.
Example: We see the following example inside the first attribute is type, then the following property is type of the style specified by it, the same button, some people ask, in front of the button is not also the type of the kind, in this case, take the following label style, Equivalent to overwriting the preceding type in parentheses, and later on.

<! DOCTYPE html >
The output is as follows:


Four. Include selectors (descendant selectors):

Syntax:E1 E2
Description: 1. Extension for child elements to the parent element style

2. Format: Parent selector specifier {Style list}

3. Note that HTML elements contain relationships

Example: the inclusion selector is simple, as the following span is contained within p, but the element in span selects the style specified by P p span, and the element in P selects the element specified by P p, which is the nearest principle:

<! DOCTYPE html >
The output is as follows:


Five. Sub-object selector (child selectors):

Syntax:e1>e2

Description: 1. For child object elements style extension to parent object elements
2. Format: Parent Object selector > child object HTML element name {Style list}

3. Note the difference between the inclusion selector and the

4. Less use, usually can be replaced with the inclusion selector

Example: Sub-object selectors in fact and the original label use order no changes, such as <ul><li>,,, </li></ul> What is the style of the definition in Li, then what is the content of the <li> inside?

<! DOCTYPE HTML >
The output is as follows:


Six. ID selector (ID selectors):

Syntax:#sID
Description: 1. Used to define a unique id attribute value element style

2. Format: #选择符名称 {Style list}

3. The selector name must be the same as the element ID property value, and is case-sensitive

Example: The ID selector tag begins with a #, then the following ID's content and # follow the same style as that defined, such as name.

<! DOCTYPE html >
The output is as follows:


Seven. Class selector (selectors):

Syntax: E1.classname
 Description: 1. For selecting a specific class selector

2. You can select one or more class selectors

3. Case-sensitive

Example: The style is defined by the label at the beginning of the point, and the following class follows the same style as the one after the previous point.

<! DOCTYPE html >
The output is as follows:


Eight. (Selector mix) selector grouping (Grouping):

Syntax: E1.E2.E3
 Description: 1. Common type selectors and class selectors; format: HTML element name. class selector name, no spaces in the middle

2. Other options and include selectors; the most common way to use

Example: As the name implies, Chaos is used together, and the rules are the same.

<! DOCTYPE html >
The output is as follows:


Three common style sheets:

I. Inline style sheet: the inline style sheet actually puts the style in 
Example:

<! DOCTYPE html>
The output is as follows:


Two. Inline style sheet: Actually put the style in <body>,,,,,,,, </body> interior.

Example:

<! DOCTYPE html >
The output is as follows:


Three. Link an external style sheet: The style is placed in the linked Css/demo.css document, and the link is placed in 
Example:

<! DOCTYPE html >
The output is as follows: