CSS Selector review

Source: Internet
Author: User

Universal selector: * Select to all elements
Select child element:> Select to direct descendant of element (first level child element)
Adjacent Sibling selector: + Select to the first element immediately following the target element
Normal sibling selector: ~ Selects all sibling elements that follow immediately after

Pseudo-Class selectors:
: Before: After add content (equivalent to inline element) before and after element content

CSS3 structure Selector
: Nth-child selects child elements at the specified index
Nth-child (n) the nth child element under the parent element
Nth-child (odd) odd child element (same as Nth-child (2n-1))
Nth-child (even) even sub-elements (same as nth-child (2n))
Nth-child (AN+B) formula
* (Nth-child starting from 1)
: Nth-last-child (n) The penultimate nth child element
: Nth-of-type (N) Sub-elements of the nth specified type under a parent element
: Nth-last-of-type A child of the penultimate nth specified type under the parent element
: First-child selects the first child element under a parent element
: Last-child Select the last child element under the parent element
: Only-child Select the only child element under the parent element
: Only-of-type Select a unique child element of the specified type under the parent element
: Root selects the root directory of the document and returns the HTML

Div:only-child Note spaces (select only child elements under DIV)

Pseudo class Selector
: Link to a page that has not been visited set style
: visited sets the style of a link to a page that has been visited
: Hover on mouse hover
: Active is triggered when clicked
: Enabled selects the Enable State element
:d isabled Select the Disable state element
: Checked Select selected INPUT element (radio button or check box)
:d Efault Select a default element
: Valid, invalid select valid or invalid INPUT element based on input validation
: In-range, Out-of-range Select elements that are restricted within or outside the specified range
: repuired, optional Select the INPUT element according to whether it is allowed: required attribute

Use the label to modify the style of the radio:

Property Selector
E[attr] Property name, no specific attribute value
E[attr= "value"] Specifies the property name and specifies its corresponding property value
E[attr ~= "value"] Specifies the name of the property, which is found with this property name, and is separated from the other property names by a space, as follows:

E[attr ^= "value"] Specifies the property name, and the property value begins with value
E[attr $= "value"] Specifies property name, property value ends with value
E[attr *= "value"] Specifies the name of the property, which contains the value
E[attr |= "value"] Specifies the property name, the property value starts with value-, or the value is values

CSS Selector review

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.