Css
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) Quote
from:css2/selector.html href= "http://www.w3.org/TR/CSS2/selector.html" target=_blank> http://www.w3.org/TR/CSS2/selector.htmlWe use the following example to explain " Parent Element”、“ child elements”、“ Parent/Childand adjacent"These few concepts. <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
Syntax: * {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
Syntax: 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
Syntax: 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
Syntax: 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
Syntax: E1 > E2 {srules} Description:
The child object selector. Selects all E2 as E1 child objects.
Example: 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
Syntax: #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
Syntax: 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
Syntax: 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
Syntax: 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;}
