Home > Developer > JavaScript
The pseudo class of CSS, css
1.
: Link: Add styles to unaccessed links
: Visited adds a style to the accessed Link
: Hover: Add a style to the element when the mouse is hovering over the element
: Active adds a style to the activated element (clicked)
When the above four pseudo classes are used for hyperlinks, a: hover must be after a: link and a: visited, a: active must be after a: hover, a: link and: the order of visited is not specified.
1.1 hyperlink:
<style>a:link{ color:red; }a:visited{ color:green; }a:hover{ color:blue; }a:active{ color:yellow; }</style><a href="#">pmx-cnblogs</a>
1.2 div
<style>div{ width:100px; height:100px; background-color:red; border:3px solid blue; overflow:hidden; transition:width 1s,height 2s,background-color 1s,line-height 2s,font-size 2s; line-height:100px; text-align:center;}div:hover{ background-color:green; width:300px; height:300px; line-height:300px; font-size:2em}div:active{ color:yellow;}</style><div>This is div</div>
Normal status:
How it looks when you move the cursor over the div:
The left mouse button is as follows:
2.: first-child
P: first-child: select the p element as the first child element of an element, instead of the first child element of the p element.
<style>#myDiv > p:first-child{ background-color:#3C6; }</style><body> <p>p8</p> <div id='myDiv' style='width:300px;height:300px;overflow:auto'> <p>p1</p> <p>p2</p> <p>p3</p> <div> <p>p4</p> <p>p5</p> </div> </div> <p>p6</p> <p>p7</p></body>
P1 is selected as the first child element of myDiv
3.: focusAdd a special style to the element with focus. For example, after a button is clicked, Enter text in the text box.
<style>input:focus{ background-color:yellow; }</style><input type='text' value=""/>
<Style>: lang (zh) {color: red ;}</style> <p lang = "zh"> p7 </p>
5.: target
: The target pseudo-class is related to hyperlinks. This is often the case when we want to open the page or click a button to locate an element in the page.
<A href = "# jump> jump </a> <! -- The id must be --> <p id = "# jump"> This is paragraph </p>
: Target is the element that is located after the hyperlink is captured. the CSS code in: target controls the captured element.
<!DOCTYPE html>When you click jump to 1, paragraph1 becomes red.
When you click jump to 2, paragraph2 becomes red
: Target indicates all the elements to be located, and the background color changes. If we want paragraph1 to become red separately, we can do this:
<style> #jump1:target{ background-color:red; } </style>Case:
<! DOCTYPE html>
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
