Home > Developer > Web Develop
The pseudo-class selector , unlike the element style in the general DOM, does not alter any DOM content. Just a few elements of the decorated class are inserted, which are visible to the user, but not visible to the DOM. The effect of a pseudo-class can be achieved by adding an actual class.
A:link|a:visited|a:hover|a:active
In the CSS definition, a:hover must be placed a:link and a:visited after, is valid, a:active must be placed a:hover after, is valid.
Because the state is dynamically changing, when an element reaches a certain state, it may get a pseudo-class style, and when the state changes, it loses the style. As you can see, its function is somewhat similar to class, but it is based on abstractions outside of the document, so it is called a pseudo class.
: Focus /* */: First-child*/*: lang/* */
pseudo-Element selectors , the effects of pseudo-elements are required to be achieved by adding an actual element.
/***: first-line/**/: First-letter/* */: Before/* */: After
Structural pseudo-Class selectors
: root () selector, literally we can clearly understand is the root selector, he means to match the element E is located in the document root element. In an HTML document, the root element is always
: The Not () selector, called the negative selector, is exactly the same as the: not selector in jquery, and you can select all elements except an element.
: The empty () selector represents null. Used to select elements without any content, nothing here refers to a little bit of content, even if it is a space.
: the target () selector specifies a style for the page's target element (the ID of the element is used as a hyperlink in the page), which works only when the user taps the hyperlink in the page and jumps to the target element.
: the First-child () selector represents the element e that selects the first child element of a parent element. The simple point of understanding is to select the first child element in the element, remembering that it is a child element, not a descendant element.
: Nth-child () selects one or more specific child elements of an element.
<!DOCTYPE HTML><HTML> <Head></Head> <styletype= "Text/css">Div p:nth-child (n){Color:Red; }Div p:nth-child (2n){Color:Yellow; } </style> <Body> <Div> <P>111</P> <P>222</P> <P>333</P> <P>444</P> <P>555</P> </Div> </Body></HTML>
: Nth-last-child () selects a specific element, starting with the last child element of a parent element.
<!DOCTYPE HTML><HTML> <Head></Head> <styletype= "Text/css">Div P:nth-last-child (2){Color:Red; } </style> <Body> <Div> <P>111</P> <P>222</P> <P>333</P> <P>444</P> <P>555</P> </Div> </Body></HTML>
: the Nth-of-type (n) selector and the: Nth-child (n) selector are very similar, except that it calculates only the child elements of one of the types specified in the parent element. When a child element in an element is not just a child of the same type, it is convenient and useful to use the: Nth-of-type (n) selector to locate a child element of some type in the parent element.
: Only-child represents that an element is the only child element of its parent element.
Pseudo-Elements in CSS3
CSS3 has made some adjustments to the pseudo-elements, adding one on the previous basis:
Which is now:: First-letter,::first-line,::before,::after
There is also an additional:: Selection
In CSS3, the pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two colons.
::first-lineSelect the first line of the element, such as changing the style of the first text of each paragraph, we can use this
::beforeAnd ::after These two are mainly used to give elements of the front or back of the content, the two commonly used "content" in conjunction with the most seen is to clear the floating
<!DOCTYPE HTML><HTML> <Head></Head> <styletype= "Text/css">. Test:before{content:"Hello"; }. Test.after{Clear:both; } </style> <Body> <Divclass= "Test"></Div> </Body></HTML>
::selectionUsed to change the default effect of selecting Chinese on a Web page
UI State element Pseudo class Selector
E:checked{attribute} matches all selected elements in the user interface (Form form)
E:enabled{attribute} matches all elements in the user interface (form form) that are in the available state
E:disabled{attribute} matches all elements in the user interface (form form) that are in an unavailable state
E::selection{attribute} matches the part of the element that is selected by the user or is in a highlighted state
Target Pseudo-Class
E:target{attribute} matches the element pointed to by the related URL
Pseudo-element selectors and pseudo-class selectors of CSS3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
