Deep understanding of CSS Pseudo-classes

Last Update:2016-05-23 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

xTable of Contents [1] Anchor point [2]ui element [3] structure pseudo class [4] other front wordsPseudo-classes are often confused with pseudo-elements, which are similar in effect to the fact that they are achieved by adding an actual element, and the Pseudo-class effect is similar to that achieved by adding an actual class. In fact CSS3 to differentiate between the two, the Pseudo-class is explicitly represented by a colon, while the pseudo-element is represented by two Colons. This article will detail the details of the Pseudo-classAnchor PointAbout the anchor point <a> there are 5 common pseudo-classes, respectively: link,:hover,:active,:focus,:visited<pre><pre>a:link{background-color:pink;} /* magenta, not visited */</pre></pre><pre><pre>a:hover{background-color:lightblue;} /* light blue, Mouse Hover */</pre></pre><pre><pre>a:active{background-color:lightgreen;} /* light green, is being clicked */</pre></pre><pre><pre>a:focus{background-color:lightgrey;} /* light gray, with Focus */</pre></pre><pre><pre>a:visited{color:orange;} /* the font Color is orange and has been accessed */ /* [note]visited Pseudo-class can only set font color style */</pre></pre>Pseudo-class OrderFor Pseudo-class order, There is a love-hate, which represents the order of the Pseudo-class is link, visited, focus, hover, Active. But is it possible that the order of pseudo-classes can only be so? Why is this order?It is important to have a rule in the CSS cascade, which is to overwrite the front, so the order of the pseudo-class needs to be carefully considered."1" link and visited must be in the front, and there is no order, otherwise the effect of link or visited will be overwritten[note That]link and visited are called static pseudo-classes and can only be applied to hyperlinks"2" hover, active, Focus These three pseudo-classes must be the focus, hover, active order, because in the focus state, also need to trigger hover and active, and to trigger active must first trigger hover, So the active is going to be behind Hover.[note that]hover, active, and focus are called dynamic pseudo-classes and can be applied to any element, but Ie7-browser does not support: focus,:hover and: Active is only supported for <a> settings under Ie6-browserSo there are only two final sequences: link, visited, focus, hover, active or visited, link, focus, hover, Active<pre><pre>a:link{background-color:pink;} /* magenta, not visited */ a:visited{color:orange;} /* the font Color is orange and has been accessed */ A:focus{background-color:lightgrey;} /* light gray, with Focus */ A:hover{background-color:lightblue;} /* light blue, Mouse Hover */ A:active{background-color:lightgreen;} /* light green, is being clicked */</pre></pre>UI Element Pseudo-classUI element Pseudo-class includes: enabled,:d isabled,: checked three, mainly for the form element in html, Ie8-browser does not support<pre><pre>: Enabled status: disabled notavailable status:checked selected state </pre></pre><pre><pre>input:enabled { border: 1px solid black; background-color: Transparent;} input:disabled { border: none; background-color: Gray;} input:checked { outline: 2px solid LightBlue;}</pre></pre><pre><Buttononclick= "btn.disabled = false;">Button available</Button> <Buttononclick= "btn.disabled = true;">Button not available</Button> <inputtype= "button"ID= "btn"value= "button"> <BR><label>Male<inputtype= "radio"name= "sex" /></label> <label>Female<inputtype= "radio"name= "sex" /></label></pre>[note that there can be no spaces between]input and enabledStructure Pseudo-classStructure Pseudo-class can be divided into the following 3 cases, Ie8-browser does not supportThe following are the cases where E is the parent element and F is the child element"1": nth-child (n),: nth-last-child (n), first-child, last-child,: only-child<pre><pre>E f:nth-child (n) Select the nth child element e F:nth-last-child (n) of the parent element to select the first child element of the parent Element's reciprocal nth Child element e f:first-child , and E F: Nth-child (1) is equivalent to the last child element of the E f:last-child parent element, and E F:nth-last-child (1) is the same as E F:only-child Select the parent element to contain only one child element</pre></pre>[note]:firsr-child and: Last-child only Ie6-browser does not supportn can be an integer (starting at 1), or it can be a formula, or it can be a keyword (even, odd)<pre><pre> P:first-child is not representative of < p > the first child element of the , but < p > element is the first child element of an element p > i:first-child matches all < p > The first element style= "color: #0000ff;" >< i > element p:first-child I matches all as the first child element < p > all < i > element </pre></pre><pre><pre>Li:nth-child (odd) {color: Red;} Li:nth-last-child (3) {color: Green;} Li:first-child {color: Blue;} Li:last-child {color: yellow;} Div:only-child {Background-color:lightgrey;}</pre></pre><pre><ul> <Li><Div>First Div</Div></Li> <Li><Div>A second Div</Div></Li> <Li><Div>A third Div</Div></Li> <Li><Div>A fourth Div</Div></Li> <Li><Div>A fifth Div</Div></Li> <Li><Div>A sixth Div</Div></Li> </ul></pre>"2": nth-of-type (n),: nth-last-of-type (n),: first-of-type,: last-of-type,: only-of-type<pre><pre>E f:nth-of-type (n) Select the parent element with the nth child element of the specified type E f:nth-last-of-type (n) Select the parent element with the specified type of the reciprocal nth child element e F:first-of-type Selects the 1th child element in the parent element with the specified type, with e f:nth-of-type (1) the same e f:last-of-type selects the last 1 child elements in the parent element with the specified type, with e f:nth-last-of-type (1) Same as E F:only-of-type Select a parent element that contains only one child element of the same type　</pre></pre><pre><pre>. box div:nth-of-type (even) {color:red;}. box P:nth-last-of-type (3) {color:green;}. Box div:first-of-type{color:blue;}. Box p:last-of-type{color:yellow;}. Box div:only-of-type{color:pink;}</pre></pre><pre><Divclass= "box"> <Div>First Div</Div> <P>First P</P> <Div>A second Div</Div> <P>A second P</P> <Divclass= "in">A third Div</Div> <P>A third P</P></Div><Divclass= "box"> <Div>A fourth Div</Div></Div></pre>"3": root,: not,: empty,: Target<pre><pre>: Root selects the root element of the document, that is, the

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

Deep understanding of CSS Pseudo-classes

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support