CSS Learning (4) Explanation of CSS Selector

 

CSS attributes and delimiters

The syntax structure of CSS consists of three parts: selector, property, and value ).
Usage:
Selector {property: value ;}

Selector)This set of style encoding objects can be An XHTML tag, such as body and H1, or a tag that defines a specific ID or class, for example, the # main selector indicates that <Div id = "Main"> is selected, that is, an object with the specified main as ID. The browser will strictly parse the CSS selector, and each set of styles will be applied to the corresponding objects by the browser.

Property)CSS is the core of CSS style control. For every XHTML tag, CSS provides rich style attributes, such as color, size, positioning, and floating mode.

Value)It refers to the value of an attribute. There are two types of values. One is the value of a specified range, such as the float attribute. Only left, right, and none values can be applied, for example, width can be 0-99 or other mathematical units.

In practical applications, we often use the following similar application forms:
Body {background-color: Blue ;}

Type Selector

The above body {} is a type selector. The so-called type selector refers to the selection of names based on the existing tag type in the webpage. The body is a tag type in the webpage, And the DIV is also, and the span is also. Therefore, all the following delimiters are type delimiters, which control all the body, Div, or span on the page:
Body {}
Div {}
SPAN {}

Group Selector

In addition to specifying the style of a single XHTML object, you can also assign the same style to a group of objects.
H1, H2, H3, P, span {font-size: 12px; font-family: Arial ;}
Use commas to separate the delimiters so that all H1, H2, H3, P, and span on the page have the same style definition. The advantage of this is that you only need to write a style sheet once to use the same style in the page, reducingCodeTo improve the structure of CSS code.

Include Selector

H1 span {font-weight: bold ;}
When we only want to specify a style for a sub-object in an object, it will be useful if it contains a selection character. The inclusion selector indicates that the first object in the selector combination contains the last object, and spaces are used as separators between objects. As shown in this example. We assign styles for the spans under H1 and apply them to XHTML in the following format:
<H1> This is a piece of text. <span> This is a text in SPAN </span> <H1> separate H1 <Span> separate span </span>
<H2> text applied by H2 labels <span> This is a span under H2 </span> </H2>
The span label under the H1 label will be applied to the font-weight: Bold Style settings. Note: This style is only valid for labels with this structure. This style is not applied to separately existing H1 or separately existing span and other spans not under the H1 label.
This helps us avoid setting too many IDs and classes, and directly set too many settings.
In addition to the two types of delimiters, the delimiters can also be contained at multiple levels. The following delimiters also apply to the style:
Body H1 span stront {font-Weight = bold ;}

Tag-specific Selector

If you want to use both ID or class and tag selector, you can use the following format:
H1 # Content {}
Indicates that all H1 labels with content IDs are used.
H1.p1 {}
Indicates the H1 label for all classes whose names are p1.
The tag-specific selector is between the tag selector and the ID/class selector in terms of tag selection accuracy. It is also a frequently used selector.

Combination Selector

All the preceding CSS delimiters can be used in combination no matter what type of delimiters they are.
H1. P1 {}
All class P1 labels under the H1 label.
# Content H1 {}
All H1 labels under the tag whose ID is content.
H1.p1, # Content H1 {}
Select groups from the preceding two types.
H1 # Content H2 {}
The H2 tag under the H1 tag whose ID is content.