Css selector, css
I. css Selector
1.css derived Selector
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
strong { color: red; }h2 { color: red; }h2 strong { color: blue; }
2. css descendant Selector
3. css child element Selector
The sub-Selector uses a greater than sign>
<!DOCTYPE HTML>
4. css adjacent sibling Selector
Use + connection
<!DOCTYPE HTML>
5. id Selector
Id selector #
#sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }
Select the p tag generated in the id sidebar element.
6. class selector
Class selector is displayed as a dot
<! -- Like id, class can also be used as a derived selector: -->. fancy td {color: # f60; background: #666 ;}<! -- In the above example, the table cells inside the larger element of the class named fancy will display orange text with a gray background. (The larger element named fancy may be a table or div.) elements can also be selected based on their classes: --> td. fancy {color: # f60; background: #666 ;}<! -- In the above example, the table unit named fancy will be orange with a gray background. -->
7. Attribute Selector
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Selector |
Description |
[Attribute] |
Used to select elements with specified attributes. |
[Attribute=Value] |
Used to select elements with specified attributes and values. |
[Attribute~ =Value] |
Used to select elements whose attribute values contain the specified vocabulary. |
[Attribute| =Value] |
Used to select an element with an attribute value starting with a specified value. The value must be the entire word. |
[Attribute^ =Value] |
Matches each element whose attribute value starts with a specified value. |
[Attribute$ =Value] |
Matches each element whose attribute values end with a specified value. |
[Attribute* =Value] |
The matching property value contains each element of the specified value. |