Beginners: Learn Web technology carefully CSS Selector

css| Beginners | Web page

Wildcard Selector

Grammar:

*

Description

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.
Currently, ie5.5+ does not yet support this type of selector.

Example:

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

Type Selector

Grammar:

E1

Description

Takes the document language object type as a selector.

Example:

TD {Font-size:14px; width:120px;}
a {text-decoration:none;}

Property Selector

Grammar:

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

Description

1. Select the E1 with the Attr property
2. Select the E1 with the Attr property and the property value equal to value
3. Select a list of words with the attr attribute with a space-delimited value, one of which is equal to the E1 of value. The value here cannot contain spaces
4. Select a list of words with the Attr property and the property value to be delimited by a hyphen, starting with value E1
Currently, ie5.5+ does not yet support this type of selector.

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}

Include selector

Grammar:

E1 E2

Description

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;}

Child Object Selector

Grammar:

E1 > E2

Description

Selects all E2 as E1 child objects.
Currently, ie5.5+ does not yet support this type of selector.

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;}

ID Selector

Grammar:

#sID

Description

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

Example:

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

Class Selector

Grammar:

E1.classname

Description

You can use this type of selector in HTML. The effect is equivalent to E1[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.

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 */

Selector grouping

Grammar:

E1,e2,e3

Description

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;}