The new pseudo-classes are: ":first-child", ":last-child", ":nth-child(n)", ":link", ":visited", ":active" ”, “:hover”, “:focus”, “:not()”, etc.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Structural pseudo-class selector
:first-child The first child node, :last-child The last child node, :nth-child(n) The nth child Node, :nth-last-child(n) The nth child node from the last, :only-child The only child node
:nth-child(n), :nth-last-child(n) and Some special usages limit the selection through things in brackets:
1. odd/event: the odd/even element
2. xn y: the xn y element
Without further ado, let’s talk about the code. The following is to set the pseudo-class selector for the li tag
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> li:first-child { border: 1px solid black; } li:last-child { background-color: #aaa; } li:nth-child(2) { color: #888; } li:nth-last-child(2) { font-weight: bold; } span:only-child { font-size: 30pt; } </style> </head> <body> <ol> <li>oaaaaaaaaaaa</li> <li>obbbbbbbbbbb</li> <li>occccccccccc</li> <li>odddddddddd</li> <li>oeeeee</li> <li><span id="andorid"></span>saaaaaa啊飒飒</li> </ol> </body> </html>
You can see the difference Effect
UI element status pseudo-class selector
:link (element before being visited (usually only a hyperlink)), :visited(has been visited element (usually only a hyperlink), :active (the element being accessed is between the mouse click and release (usually only a hyperlink)), :hover (the element in the mouse hover state), :focus (Element that has received focus)
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .a { font-size: 50px; } .a:link { color: red; } .a:visited { color: grey; } .a:active { color: green; } .b { height: 40px; width: 200px; } .b:focus { background-color: blue; } .c { height: 40px; width: 60px; } .c:hover { background-color: skyblue; } </style> </head> <body> <a href="#" class="a">aaa</a> <form action="#"> 文本框:<input type="text" name="aaa" class="b" /> <input type="submit" value="提交" class="c" /> </form> </body> </html>
It started like this
When we click on the hyperlink
After clicking
#Next look at the text box. When we put the focus on the text box (that is, the input of the text box status), get: the style in focus
: The not() pseudo-class selector is equivalent to the subtraction of two selectors. , such as li:not(#a){} modifies all element blocks that match the li selector but do not match the id of aRecommended learning:
The above is the detailed content of What pseudo-classes are added to html5/css3. For more information, please follow other related articles on the PHP Chinese website!

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

Reactuseskeystoefficientlyidentifylistitemsbyprovidingastableidentitytoeachelement.1)KeysallowReacttotrackchangesinlistswithoutre-renderingtheentirelist.2)Chooseuniqueandstablekeys,avoidingarrayindices.3)Correctkeyusagesignificantlyimprovesperformanc

KeysinReactarecrucialforoptimizingtherenderingprocessandmanagingdynamiclistseffectively.Tospotandfixkey-relatedissues:1)Adduniquekeystolistitemstoavoidwarningsandperformanceissues,2)Useuniqueidentifiersfromdatainsteadofindicesforstablekeys,3)Ensureke

React's one-way data binding ensures that data flows from the parent component to the child component. 1) The data flows to a single, and the changes in the state of the parent component can be passed to the child component, but the child component cannot directly affect the state of the parent component. 2) This method improves the predictability of data flows and simplifies debugging and testing. 3) By using controlled components and context, user interaction and inter-component communication can be handled while maintaining a one-way data stream.

KeysinReactarecrucialforefficientDOMupdatesandreconciliation.1)Choosestable,unique,andmeaningfulkeys,likeitemIDs.2)Fornestedlists,useuniquekeysateachlevel.3)Avoidusingarrayindicesorgeneratingkeysdynamicallytopreventperformanceissues.

useState()iscrucialforoptimizingReactappperformanceduetoitsimpactonre-rendersandupdates.Tooptimize:1)UseuseCallbacktomemoizefunctionsandpreventunnecessaryre-renders.2)EmployuseMemoforcachingexpensivecomputations.3)Breakstateintosmallervariablesformor

Use Context and useState to share states because they simplify state management in large React applications. 1) Reduce propdrilling, 2) The code is clearer, 3) It is easier to manage global state. However, pay attention to performance overhead and debugging complexity. The rational use of Context and optimization technology can improve the efficiency and maintainability of the application.

Using incorrect keys can cause performance issues and unexpected behavior in React applications. 1) The key is a unique identifier of the list item, helping React update the virtual DOM efficiently. 2) Using the same or non-unique key will cause list items to be reordered and component states to be lost. 3) Using stable and unique identifiers as keys can optimize performance and avoid full re-rendering. 4) Use tools such as ESLint to verify the correctness of the key. Proper use of keys ensures efficient and reliable React applications.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Zend Studio 13.0.1
Powerful PHP integrated development environment

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SublimeText3 Chinese version
Chinese version, very easy to use

Atom editor mac version download
The most popular open source editor
