CSS Base CSS Selector _ Basic Tutorial

Example:

*[LANG=FR] {font-size:14px; width:120px;}

*.div {text-decoration:none;}


2. Type Selector
Grammar:

E {Srules}

Description
The type selector. Use the document Language object (Element) type as the selector.
Example:

TD {Font-size:14px; width:120px;}

a {text-decoration:none;}

3. Attribute selectors
Grammar:

E [attr] {srules}

E [attr = value] {srules}

E [attr ~= value] {srules}

E [attr |= value] {srules}

Description
The property selector.
Select the E with the attr attribute
Select the E that has the attr attribute and the property value equals value
Select a list of words that have the Attr property and a space-delimited property value, where one is equal to the value of E. The value here cannot contain spaces
Select the list of words with the attr attribute with a hyphen separated by the property value, and the E that starts with the value
Example:

H[title] {color:blue;}

/* All H objects with the Title property */



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



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



a[rel~= "Copyright"] {color:black;}

4. Include selectors
Grammar:

E1 E2 {Srules}


Description
Contains selectors. Select all the E2 that are E1 included. That is E1.contains (E2) ==true.
Example:

Table td {FONT-SIZE:14PX;}



Div.sub a {font-size:14px;}

5. Sub-object selectors
Grammar:

E1 > E2 {srules}

Description
The child object selector. Selects all E2 that are E1 child objects.
Example:

Body > P {font-size:14px;}

/* All objects of the body as the P object font size 14PX */



Div Ul>li p {font-size:14px;}

6.ID Selector
Grammar:

#ID {Srules}


Description
The ID selector. The ID of the unique identifier in the document directory tree (DOM) as the object as the selector.
Example:

#note {font-size:14px; width:120px;}

7. Class Selector
Grammar:

E.classname {Srules}

Description
Class selector. This type of selector can be used in HTML. The effect is equivalent to E [Class ~= className]. See Property selector (Attribute selectors).
In ie5+, you can specify more than one value (ClassName) for the Class Property (attribute) of an object by specifying the class name of a set of style sheets separated by spaces. For example:.
Example:

div.note {font-size:14px;}

/* All class attribute values equal to (include) "Note" The div object font size is 14px */



. Dream {font-size:14px;}

/* All class attribute values equal to (include) the object font size of "note" is 14px */


8. Selector grouping
Grammar:

E1, E2, E3 {srules}

Description
Selector grouping. Applying the same definition to multiple selectors, you can separate the selectors in a comma-delimited manner and as a group.
Example:

. td1,div a,body {font-size:14px;}

td,div,a {font-size:14px;}


9. Pseudo-Class and pseudo-object selectors

Grammar:

e:pseudo-classes {Srules}

e:pseudo-elements {Srules}

Description
Pseudo-class and pseudo-object selectors.
Pseudo-class selectors. See Pseudo-Class (pseudo-classes) [: Link:hover:active:visited:focus:first-child:first:left:right:lang].
A pseudo-object selector. See 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;}

