Css3 learning + practice (2)

Iii. Pseudo-class selector

The pseudo-class Syntax of CSS mainly has two syntax expressions:

1: E: Pseudo-class{Property: Value}/* Where E is the element, pseudo-class is the pseudo class name, property is the CSS attribute, and value is the CSS attribute value */

2: E. Class: Pseudo-class{Property: Value}

A: The most common pseudo-category of anchor

. Demo A: link {color: Gray;}/* When the link is not accessed, the foreground color is gray */

. Demo A: visited {color: yellow;}/* after the link is accessed, the foreground color is yellow */

. Demo A: hover {color: green;}/* the foreground color is green when the mouse is suspended over the link */

. Demo A: active {color: Blue;}/* click the link to activate the link. The foreground color is blue */

One thing to note is that they must follow the same sequence.Love/hate principle love/hate, that is, link -- visited -- hover -- active

1. : HoverIt is used to show the effect of moving the mouse over the element;
2. : ActiveIt is used to show the effect of clicking an element. (when the cursor is clicked, the left mouse button is removed)
3. : FocusUsed to focus on elements, which are often used on form elements.

B: pseudo class of UI element status:

": Enabled", ": Disabled", ": checked"The IE6-8 does not support the ": checked", ": enabled", ": Disabled" selectors.

C: css3: nth Selector

1. : Fist-childSelect the first child element of an element;
2. : Last-childSelect the last child element of an element;
3. : Nth-child ()Select one or more specific child elements of an element;

: Nth-child (length);/* the parameter is a specific number */

: Nth-child (n);/* the parameter is N, and N is calculated from 0 */

: Nth-child (N * length)/* n multiple selection, N starts from 0 */

: Nth-child (n + length);/* select an element greater than length */

: Nth-child (-N + length)/* select an element earlier than length */

: Nth-child (N * Length + 1);/* Indicates selecting one of the following values */

1. : Nth-last-child ()Select one or more specific child elements of an element,Starts from the last child element of this element.;
2. : Nth-of-type ()SelectSpecified Element;
3. : Nth-last-of-type ()Select the specified Element and calculate it from the last element;
4. : First-of-typeSelect the first child element of the same type under a parent element;
5. : Last-of-typeSelect the last child element of the same type as the parent element;
6. : Only-ChildThe selected element is the only element of its parent element;
7. : Only-of-typeSelect an element that is the only child element of the same type of its parent element;
8. : EmptyThe selected element does not contain any content.

The IE6-8 and ff3-browsers do not support the ": Nth-Child" selector.

": Nth-last-child ()" selector is similar to the previous ": Nth-child ()", but here there is an additional last, so his role is different from the previous ": Nth-Child". He just needs to select a specific element from the last element.

: Nth-of-type is similar to: Nth-child. The difference is thatIt only calculates the specified Element in the selector.The previous instances all specify specific elements. This selector is useful for locating elements that contain many different types. For example, Div. there are many P elements and DIV elements in contain, but I only need to select the P element and let him have different styles every other P element. Then we can simply write it:

: Nth-last-of-type is the same as: Nth-of-type. Finding the specified element is only a reverse number.

: First-of-type and: Last-of-type selectors are similar to: First-child and: Last-child; the difference is that the element type is specified.

: Nth-of-type,: Nth-last-of-type;: first-of-type and: Last-of-type are not very significant, the selector like Nth-child can achieve this function..

The IE6-8 browser does not support: Only-Child selector; IE6-8 and ff3.0-browser does not support: only-of-type selector.

D: empty

: Empty is used to select elements without any content. Here, NO content indicates that there is no content at all, even a space.

IE6-8 browser does not support: Empty Selector

E: Negative selector (: Not)

The negative selector is exactly the same as the: Not selector in JQ,

Negative selector: Not (), which allows you to locate the elements that do not match the selector. IE6-8 browser does not support: Not () Selector

F: pseudo element

": First-letter,: first-line,: before,: After,: selection ":

: First-lineSelect the first line of the element.

: First-letterSelect the first letter of the text block, unless there are some other elements in the same line, but this is mainly used in paragraph layout.

: Before and: AfterThese two are mainly used to insert content to the front or back of the element. These two commonly used "content" are used together. The most common thing we have ever seen is to clear the floating

: SelectionIt is used to change the default effect of the selected text on the browser page. ": selection" is used to change the background color and foreground color of the selected text in the browser. : Selection is only supported by ie9 + in the IE family. In Firefox, you must add the prefix "-Moz" and ": selection" to set only two attributes, one is the background, and the other is the color attribute. setting other attributes has no effect.

ReferenceArticle: Click