CSS learning 2: Selector

1. Element selector: It is often an HTML element or an element defined in XML. For example:

H1 {color: red;}/* element selector */h2 {font: normal 12px/16px "Courier New", Arial;}/* css keywords are separated by spaces, only the font size in the font attribute is separated from the Row Height available "/" */h3, p {background-color: # EEE;}/* selector Group */

2. The wildcard selector adds a style to all elements on the page, like a wildcard. For example:

* {Color: blue;}/* wildcard selector, which is equivalent to the color attribute of all elements listed in the document. It has a low priority */*. p {font-weight: bold;}/* class selector, which applies to all elements whose classes are p. The (*) number can be ignored, which is equivalent. p */

3. class selector: a lot of nonsense. Let's talk about the class selector. For example:

The following HTML code is available:

<P class = "p"> This is a paragraph </p> <! -- Class selector --> <div class = "p"> This is a div element </div> <! -- Class selector --> <p class = "urgent warning"> This is a paragraph </p> <! -- Multi-class selector. A class can contain a word list, separate words with spaces --> <p class = "urgent warning help"> Those words's background-color is red too in all browser! </P> <! -- Multi-class selector. The. waring. urgent selector cannot match the p --> <p class = "help ie6"> Those words's background-color is red in browser ie6! </P> <! -- Multi-class selection operator, because help appears at the end of the selector, in IE6, the background is red --> <p class = "help"> Those words's background-color is red in browser ie6! </P> <! -- Class selector, because help appears at the end of the selector, therefore, in IE6, the background is red --> <p> This is a paragraph <span class = "warning"> But this is a span element </span> </p>

The CSS style is as follows:

P. p {font-style: italic;}/* class selector. The bold text is displayed only when the section is selected and the class is p */. waring {font-weight: bold ;}. urgent {font-style: italic ;}. warning. urgent {background-color: silver;}/* class selector, select the elements that contain both the waring and urgent classes, and the order of appearance can be different from that when the class is defined */p. warning. urgent. help {background-color: red;}/* class selector, and select p elements that contain both the waring, urgent, and help classes, however, in IE6, this selector matches all p elements of the help class attribute */

In non-IE6, if the CSS contains. warning. urgent. the help selector only matches HTML elements that contain the waring, urgent, and help classes at the same time, in HTML, selectors such as class = "urgent warning help" can match multiple styles in CSS, but different in IE6, which is worth noting.

4. ID selector: Compared with the class selector, the ID selector is not so complex. The ID attribute cannot have a list of words separated by spaces. For example, the following statements are incorrect:

<Div id = "div1 div2">... </div> <! -- This method is incorrect -->

No matter how CSS is written, the style will be invalid. However, the ID selector and the class selector can be used in combination as follows:

# Div. div {color: red;}/* combination of the ID selector and the class selector, which can be written in this way, and the order can be reversed */

Match: declare the ID as div and declare the HTML elements of the div class.

In addition, since the ID selector is used, IDS can only be used for one element of one element. For example, the following statement is incorrect:

These three elements have the same ID and cannot appear simultaneously in the same document. This also reflects the uniqueness of the ID.
5. Attribute selector: Unfortunately, the attribute selector is not recognized by IE6, while IE7 and later IE series support most CSS2.1 attribute selectors.
Simple attribute selector instance:
A [href] {color: yellow;}/* simple attribute selector that matches all a elements with href attributes */* [title] {font-weight: bold ;} /* simple attribute selector that matches all elements with the title attribute */a [href] [title] {color: red;}/* simple attribute selector, match All a elements with the title attribute and href attribute */
The following is a selection based on the specific attribute values:
A [href = ".. /chemdemo/"] {color: yellow;}/* based on the specific attribute value, the matching link is" .. /chemdemo/"a tag */p [class =" urgent warning "] {font-weight: bold;}/* based on the specific attribute value, the attribute value must be exactly matched, writing class = "urgent" or others is incorrect */
In the above example, p [class = "urgent warning"] strictly matches the p elements with class = "urgent warning" class, and the order of urgent and warning is not reversed.
For the class = "urgent warning" class, CSS can be written as follows:
P [class ~ = "Warning"] {color: red;}/* based on some property values, select "~" Indicates that a space-separated word appears in the attribute to select the corresponding p element */[class ~ = "Urgent"] {color: gray;}/* based on some property values, select "~" Indicates that a space-separated word appears in the attribute to complete the selection */
Of course, it is not limited to class attributes. Any attribute can use an attribute selector, such as the selector img [title ~ = "Figure"] will match the image with the title value containing "Space and Figure.
There are also the following seed string matching attribute selectors:
[Class ^ = "cl"] {}/ * substring matching attribute selector, "^ =" matches the element */[class $ = "dy"] {}/ * matches the attribute selector with a substring starting with cl, "$ =" matches the element */[class * = "ou"] {}/* substring matching attribute selector of the class Attribute Value ending with dy, "* =" matches the value of the class attribute and the element of ou */
The last property selector is a specific property selection type. The example is as follows:
* [Lang | = "en"] {}/* select all the elements whose lang attribute is en or starting with en-*/img [src | = "figure"] {}/ * You can select a series of images named "figure */
6. Select elements based on the nested relationship of HTML tags:
One is to select the descendant element:
H4 em {}/* adds a style for the descendant em element of h4 */ul ol li em {}/* descendant selector, not limited to two selector */
One is to select sub-elements:
Add HTML code:
<H2> This is <strong> very </strong> important. 
The following CSS will display the previous "very" in bold:
H2> strong {color: red;}/* select the strong element from all child elements of h2 */
Another option is to select adjacent sibling elements. If you do not want to select all descendant elements, you can select adjacent sibling elements to narrow down the selection range:
H2 + p {}/* select the p elements that follow h2 (note that adding styles to p). They are sibling elements (must have the same parent element) */html> body tabke + ul {}/* use multiple choices */
Note: IE6 does not support sub-selectors and adjacent selectors.
7. pseudo class:
There are two pseudo classes used only for links: ": link" and ": visited". I believe there are no strangers to people who know CSS. I will not give an example here;
Dynamic pseudo-classes: In CSS2.1, there are three types: ": focus", ": hover", and ": active". The common method for Web pages is to combine with static pseudo-classes:
a:link {}a:visited {}a:hover {}a:active {}
The pseudo-class sequence is very important. The personal memory method is love-hate (love and hate ).
Dynamic pseudo-classes can be applied to any element, such:
Input: focus {background: # DDD;}/* highlight a form element with input focus */*: hover {background: gray ;} /* all elements inherited from the body element show a gray background when the pointer stays */
To select the first child element of an element, use the ": first-child" static pseudo class:
CSS style:
p:first-child,li:first-child {background:#CCC;}
HTML code:
<Div> <p> p1 </p> <! -- The background is gray --> <p> p2 </p> <ul> <li> 1 </li> <! -- The background is gray --> <li> 2 </li> <li> 3 </li> </ul> </div>
Note: IE6 does not support ": first-child" static pseudo classes.
The following describes how to combine pseudo classes:
A: link: hover {color: red;}/* The sequence can be switched. You can think of a: hover: link. in IE6, only note: hover and ignore: link part */: visited: hover {color: maroon;}/* The sequence is interchangeable. in IE6, only note: hover and ignore: link part */
The above style enables the mouse pointer to stay on the unaccessed link, the link is red, when stuck on the accessed link, the color is purple red.
You can also choose the language, that is, use: lang as the class:
*: Lang (fr) {font-style: italic;}/* convert the French element into italic */
For more code, see the CSS manual.
In addition, there are three pseudo classes: first, left: And right. They are only used for @ page rules, for example:
@ Page: right {margin: 4 cm}/* set the style used by the page container on all pages on the right of the binding line */@ page: first {}/* set the style used on the first page of the page container */
8. pseudo elements: CSS2.1 contains four pseudo elements: first-letter, first-line, before, and after. Example:
P {width: 500px;}/* set the element width before using: first-line. If the width attribute of the object is not specified, the content length of the first line varies with the window width */p: first-line {color: red;}/* regardless of whether the width of p is set, the first text in the p element is always displayed in red */p: first-letter {font-size: 2em;} h2: before {content: "{"; color: green ;} /* Add a "{" symbol before the h2 element content, and the color is green */h2: after {content: "}"; color: green ;} /* A "}" symbol is added to the content of the h2 element, and the color is green */h3: after {content: "END"; color: red ;} /* in a non-IE6 browser, the h3 element will END with the red "END" word */span: before {content: "s"; color: red ;} /* in a non-IE6 browser, a red "s" */span: first-letter {color: green; font-size: 40px;} will be added before the span ;} /* the first word of the span element will not change to green. The size is the default value */span {position: absolute;}/* after the absolute position of the span, the first letter will change to green, the size is 40px */
The conclusion is:
1) IE6 supports the following pseudo elements: first-line and: first-letter. The following pseudo elements are not supported: after and: before;
2): first-line and: first-letter can only be used for block-level elements.: after and: before are suitable for block-level and intra-row elements;
3) when the position attribute is set to absolute or the display attribute is set to block, the values of first-line and first-letter are valid.