CSS: Selector Daquan

First, the concept:

The main function of CSS is to set the DOM elements in the Web page style, the selector is used to match the DOM elements.

There are many selectors in CSS, the tag selector (depending on the element tag name), the class selector (depending on the element class attribute), the ID selector (based on the element id attribute), and three selectors that can be used in combination with each other

Second, more:

Selectors are the core of CSS, from the initial elements, class/id selectors, to pseudo-elements, pseudo-classes, and the richer selectors available in CSS3, to locate any element on the page that begins to become more simple.

Third, selector table:

Four, Detailed:

1. Element Selector

This is the most basic CSS selector, and the element in the HTML document itself is a selector:

p {line-height:1.5em; margin-bottom:1em;} 　　　　 //Set P element row height 1.5em, outside padding 1em

2. Relationship Selector

　 E F: descendant selector, which locates all elements of the descendant of element E F

　　　　　　　ul li {margin-bottom:0.5em;} //Locate all LI elements within UL

　e > F: sub-selector, which locates all element F in the immediate child element of E, it ignores any further nesting:

ul > li {list-style:none;} // only the direct sub-element of UL Li, if Li is also nested inside the other UL structure, the innermost Li will be ignored

　e + F: The adjacent sibling selector, which locates the element F with the same parent element as element E and immediately adjacent to E in the tag:

Li + li {border-top:1px solid #ddd;} // 　　　　　 locates all Li except the first Li in UL with the same parent element

　　　e ~ F: general sibling selector, which locates all elements F with the same parent element as element E and after E in the tag:

h1 ~ P {color: #f00;} // locates all P tags after the H1 tag with the same parent element

3. Attribute Selector

　E[attr]: This selector locates any element with attribute attr E:

　　　　　input[required] {border:1px solid #f00;} //Locate all input with required attribute "required" in the page

　E[attr=val]: This selector locates any element E that has the attribute attr and the attribute value is Val:

　　　　　Input[type=password] {border:1px solid #aaa;} //Locate the Password entry box in the page

　　　E[attr|=avl]: This selector locates any element that has an attribute attr and the property value is Val or begins with val-E:

　　P[class|=a] {color: #333;}　　　 //Locate all P paragraphs in the page with the class attribute and the attribute value A or a-start, such as class= "a" and class= "a "

　E[attr~=val]: This selector locates any element E that has the attribute attr and the property value is the full word val:

　Div[title~=english] {color: #f88;}　　　　　 //Locate all div containers in the page that have the attribute title and the full word Chinese in the attribute value, such as title= "中文版" and title= "a 中文版"

　　　　E[attr^=val]: This selector locates any element E that has the attribute attr and the attribute value begins with Val:

　　　Div[class^=a] {color: #666;}　　 //Locate a div container with attribute class and a property value beginning with a in the page, such as class= "a" and class= "AB"

　　　　E[attr$=val]: This selector is the opposite of E[attr^=val], locating any element E that has an attribute attr and the attribute value ends in Val:

　　　　　　Div[class$=a] {color: #f00;} //Locate a div window with attribute class and the attribute value ending with a in the page, such as class= "NBA" and class= "CBA"

　　　E[attr*=val]: This selector is similar to E[attr~=val], but further, locate the element that has the attribute attr and the attribute value anywhere containing Val E,val can be a complete word, or it can be part of a word:

　　　　　A[title*=link] {text-decoration:underline;} //Locate all a link with link string in title

4. Pseudo-Class

　　　: Link: not visited;

　　　　　 a: link {color:black font-size:12px;} //Not accessed, the font is black and the font size is 12 pixels

: Visited: the link that has been visited is not recommended;

　　　　　a:visited {color:red font-size:22px;} //After access, the font is red and the font size is 22 pixels

　　　: hover: mouse moves to the container, not limited to links, can be used in any element of the page;

　　　　　　a:hover {color:blue font-size:16px;} //mouse Press and hover, the font is blue and the font size is 16 pixels

　　　　: Active: The state when activated, not limited to links, can be used for any element with the TabIndex attribute;

　　　　　　a:active {color:purple font-size:18px;} //When the mouse is released, the font is purple and the font size is 18 pixels

　　: Focus: the state at the focal point, not limited to links, can be used for any wireless with TabIndex properties:

　　　　　　Input:focus {border:1px solid #333;} //input box style when getting focus

　　: Enabled: an interface element that has been activated:

　　　　　　input:enabled {border:1px solid #899;} //input box style when the input function is enabled

　　　:d isabled: Disabled interface elements:

　　　　　　input:disabled {background: #eee;} //input box style when the input function is disabled

: target: The selector locates the destination element of the anchor within the currently active page:

　　　　#info: target {font-size:24px;} id= "Info" will load this font style when the URL URL visited is 123.html#info

:d Efault: A UI element applied to one or more default elements as a set of similar elements;

　　　　: Valid: applies to valid elements:

　　　　　　Input:valid {border:1px solid #6a6;} load this border style when the input box is validated as valid, based on the type or pattern property

　　　: Invalid: required elements that are applied to empty, and elements that do not match the requirements defined by the type or pattern property:

　　　　　　Input:invalid {border:1px solid #f00;} This border style is loaded when the input box is empty and required, or if it is filled out but the validation is not valid

　　　　: In-range: applies to an element with a range limit, where the value is within the limit, such as number and range input boxes with min and Max attributes;

　　　: Out-of-range: In contrast to: In-range selection, where the value is outside the limit;

　　　: Required: applies to form controls that have required attribute required;

　　　　: Optional: applies to all form controls that do not have a required attribute required

: Read-only: applies to elements whose contents cannot be modified by the user;

　　　: read-write: an element, such as an input box, that is applied to its contents for user modification;

　　　: Root: an element that always refers to an HTML element;

　　　　e f:nth-child (n): The selector locates element F of the nth child element of element E:

　　　　　　Div.class P:nth-child (3) {color: #f00;} The 3rd element p in the div container of//class= "class", if the 3rd child element is not p, the style will be invalidated

　　　e f:nth-last-child (n): The selector locates element F of the reciprocal nth element of element E;

　　　E:nth-of-type (N): The selector locates the nth specified type of element E as a sub-element;

　　　　E:nth-lash-of-type (N): The selector locates the derivative of element E the nth specified type child element:. Class P:nth-child (2) and. Class P:nth-of-type (2) The difference is that if the 2nd child element in the. Class is not a P element, the style of. Class P:nth-child (2) will be invalid, and the. Class P:nth-of-type (2) will be positioned in the 2nd P element in the. Class . Nth-child (n), Nth-last-child (n), Nth-of-type (n), Nth-last-of-type (n), where n can use a numeric static type, such as. Nth-child (2n+1) will match 1th, 3, 5. Elements

　　　E:first-child: The first child element of the parent element, E, is the same as: Nth-child (1);

　　　E:last-child: The second-to-last child element of the parent element E;

　　　　E:first-of-type: Same as: Nth-of-type (1);

　　　　E:last-of-type: Same as: Nth-last-of-type (1);

　　　　E:only-child: The only child element in the parent element, E;

　　　E:only-of-type: The only element in the parent element that has that type E;

　　　E:empty: element without child element, no child element including text node;

　　　　E:lang (en): an element with a language expressed using a double-letter abbreviation (EN);

　　　　E:not (Exception): The selector selects elements that do not match the selectors in parentheses:

　　　　　　p:not (. info) {font-size:12px;} //Match all P elements with class value not info

5. Pseudo-Elements

Pseudo-elements can be used to locate text contained in a document, to differentiate against pseudo-classes, to use double colons:: Definitions, but single colons: can also be identified.

　　　　: : First-line: matches the first line of text;

　　　　: : First-letter: match text first letter;

　　　　:: Before with:: After: use the Contnet property to generate additional content and insert in markup:

　　　　　　a[href^=http]::after {content: "link"} //Insert text after a link in page

　　　　:: Selection: match highlighted text:

　　　　　　:: Selection {background: #444; color: #fff;} //define the selected text color and background color

Of course, if you want to easily use these powerful CSS selectors, you can use Chrome, Firefox and other browsers, at least you have to abandon IE9 below the IE version of the browser bar.

CSS: Selector Daquan