A detailed explanation of Web page production knowledge CSS Selector

css| Web page

One. Selector mode

Pattern/meaning/content description

*
matches any element. (Universal selector)
E
Matches any element e (for example, an element of type E). (type selector)
E F
Matches any descendant element F of element E. (descendant selector)
E > F
Matches any child element F of element E. (sub selector)
E:first-child
When Element e is the first child element in its parent element, the match element E. (: First-child pseudo Class)
E:link e:visited
Match element E If E is a destination that has not been accessed (: link) or a hyperlink that has already visited (: visited). (Link pseudo Class)
E:active E:hover E:focus
Match E in the determined user action. (Dynamic pseudo Class)
E:lang (c)
If an element of type E uses the (human) language C (the document language determines how the language is determined), the element is matched. (: lang () pseudo class)
E + F
If an element E is directly before the element F, then the element f is matched. (near selector)
E[foo]
Matches any element E that has an "foo" attribute set (regardless of its value). (Property selector)
e[foo= "Warning"]
Matches any element E whose "foo" attribute value is strictly equal to "warning". (Property selector)
e[foo~= "Warning"]
Matches a list of values whose "Foo" property value is a space-delimited, and one of them is strictly equal to any element E of "warning". (Property selector)
E[lang|= "en"]
Any element E that matches its "Lang" property with a list of values beginning with "en" (from the left). (Property selector)
Div.warning
HTML only. Usage with div[class~= "warning"]. (class selector)
E#myid
Any element E that matches the ID equal to "myID". (ID selector)

We use the following example to explain the concepts of "[s] parent element [a]", "[s] child elements [/s]", "[S.] Parent/child [?]" and "[s] adjacent to [/a]".

<div title= "This is a div" >
<p> This is the content of a paragraph p! <strong> here is the content of strong </strong> This is the content of a paragraph p! </p>
</div>
From the above code, we can find such a relationship:

H1 and P are the "sons" of Div, which form a "parent/child" relationship with Div respectively.

H1,p,strong are the "child elements" of the Div. (all three are included within the DIV)

Div is the "parent element" of H1 and P.

Strong and P form a "parent/child" relationship, and the strong "parent element" is p.

But strong and div is not "parent/child" relationship, but "grandchildren" relationship, but strong is still the "son (Sun) element" of Div.

Div is the "ancestor" of the H1 p strong, and the three are the "child (grandchild) elements" of the Div.

H1 and P are adjacent to each other.

Inherit the above example to illustrate the relationship between E F: if we need to change the contents of the strong into green, what can we do?

Div Strong {Color:green}/*-correct. Strong is the "child element" of div * *
P > Strong {Color:green}/*-correct. Strong and P are "parent/child" relationships * *
div > Strong {color:green}/*-Error! Although Strong is the "son (Sun) element" of Div, the two are "grandchildren" relationship, not "parent/child" relationship, so can not be connected with > symbol * *
Proximity selector and Universal selector: The universal selector is represented by an asterisk "*" and can be used in place of any tag.
Instance:

H2 + * {color:green}/* all text in the element immediately following H2 will appear red/

Two. Introduction to selector classification

1. Wildcard Selector
Grammar:

* {Srules}
Description
The wildcard selector. Select a single object for all types in the document tree (DOM).
If the wildcard selector is not the only component of a single selector, "*" can be omitted.
Example:

*[LANG=FR] {font-size:14px; width:120px}
*.div {text-decoration:none;}
2. Type Selector
Grammar:

E {Srules}
Description
Type Selector. Takes a document language object (Element) type as a selector.
Example:

TD {Font-size:14px; width:120px;}
a {text-decoration:none;}
3. Property Selector
Grammar:

E [attr] {srules}
E [attr = value] {srules}
E [attr ~= value] {srules}
E [attr |= value] {srules}
Description
The property selector.
Select an E with the Attr property
Select an E with the Attr property and the property value equal to value
Select a list of words that have the Attr property and the property value is a space-delimited, with one equal to the value of E. The value here cannot contain spaces
Select a list of words with the Attr property and the property value to be delimited by a hyphen, starting with value E
Example:

H[title] {color:blue;}
/* All H objects with Title attribute * *

Span[class=demo] {color:red;}

div[speed= "Fast"][dorun= "no"] {color:red}

a[rel~= "Copyright"] {Color:black}
4. Include selector
Grammar:

E1 E2 {Srules}
Description
Contains a selector. Select all E2 that are included in the E1. namely E1.contains (E2) ==true.
Example:

Table td {FONT-SIZE:14PX;}

Div.sub a {font-size:14px;}
5. Child Object Selector
Grammar:

E1 > E2 {srules}
Description
The child object selector. Selects all E2 as E1 child objects.
Example:

[Copy to Clipboard] [ - ] CODE:
Body > P {font-size:14px;}
/* All child objects as body of the P object font size is 14px */

Div Ul>li p {font-size:14px;}
6.ID Selector
Grammar:

#ID {Srules}
Description
ID selector. The ID of the unique identifier of the object in the document tree (DOM) as the selector.
Example:

#note {font-size:14px; width:120px;}
7. Class Selector
Grammar:

E.classname {Srules}
Description
Class selector. You can use this type of selector in HTML. The effect is equivalent to E [Class ~= className]. See also property selector (attribute selectors).
In ie5+, you can specify more than one value (ClassName) for the object's Class property (attributes) by specifying the class name of a set of style sheets separated by spaces. For example: <div class= "Class1 class2" >.
Example:

div.note {font-size:14px;}
/* All class attribute values equal to (inclusive) "Note" Div object font Size 14px * *

. Dream {FONT-SIZE:14PX}
/* All class attribute values equal to (include) "Note" The object font size is 14px */
8. Selector grouping
Grammar:

E1, E2, E3 {srules}
Description
The selectors are grouped. By applying the same definition to multiple selectors, you can separate the selectors by a comma and be a group.
Example:

. td1,div a,body {font-size:14px;}
td,div,a {font-size:14px;}
9. Pseudo class and Pseudo object selector

Grammar:

e:pseudo-classes {Srules}
e:pseudo-elements {Srules}
Description
Pseudo class and Pseudo object selector.
The Pseudo class selector. See Pseudo Class (Pseudo-classes) [: Link:hover:active:visited:focus:first-child:first:left:right:lang].
The Pseudo object selector. See also pseudo object (pseudo-elements) [: First-letter:first-line:before:after].
Example:

Div:first-letter {font-size:14px;}
a.fly:hover {font-size:14px; color:red;}