What are the functions of the four css hyperlink pseudo-classes?
The functions of the four css hyperlink pseudo-classes: 1. ":link", which defines the style of normal links; 2. ":visited", which defines the style of visited links; 3. ":hover" , defines the style when the mouse hovers over the link; 4. "active", defines the style when the mouse clicks on the link.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Because we need to define the link style, the anchor tag in the hyperlink - a is essential. The method of writing the link between the anchor tag and the pseudo class is the basic method of defining the link style. , they are written as follows:
a:link, define the style of normal link;a :visited, defines the style of the visited link;a:hover, defines the style when the mouse is hovering over the link;a:active, defines the style when the mouse clicks on the link.
Among them: :link and :visited can only be applied to setting hyperlink a, while :hover and :active can be applied to all elements
:hover is used to indicate the status of the mouse moving in
:active is used to indicate the mouse click
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接的伪类</title>
<link rel="stylesheet" href="../css/a.css">
</head>
<body>
<a href="https://www.12345.com/" target="__blank">没访问过的链接</a>
<br>
<a href="https://www.csdn.net/" target="__blank">访问过的链接</a>
</body>
</html>/* 没访问过的链接状态 */
a:link{
font-size: 20px;
color: hotpink;
}
/* 访问过的链接状态 */
a:visited{
color: green;
}
/* 鼠标移入链接时的状态 */
a:hover{
color: rgb(0, 217, 255);
}
/* 鼠标点击链接时的状态 */
a:active{
color: rgb(255, 0, 0);
}
Note: As long as you have searched for it, it will be counted as visited, unless you clear the historical browsing cache data.
Pseudo elements
Pseudo elements are some special elements on the page that do not really exist. Pseudo elements represent some special positions. Pseudo elements use:: at the beginning
::first-letter represents the first letter
::first-line represents the first line
::selection represents Selected content
::before The beginning of the element
::after The last part of the element
Note:
1. Because of setting::before and: :after has no effect, so ::before and ::after must be used in conjunction with the content attribute. 2. The content added in content cannot be selected with the mouse.
3. The q tag in HTML represents a short quote, which has the effect of adding double quotes. The principle is that the ::before and ::after attributes are used, and double quotes are added to the content, so the double quotes of the q tag cannot be selected. .
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<link rel="stylesheet" href="../css/pseudo_element.css">
</head>
<body>
<h3 id="WHERE-nbsp-THERE-nbsp-IS-nbsp-A-nbsp-WILL-nbsp-THERE-nbsp-IS-nbsp-A-nbsp-WAY">WHERE THERE IS A WILL, THERE IS A WAY</h3>
<p>The secret of success (The key to success) is not so much money as a strong will. A great man is one who has a strong will and an indomitable spirit. In other words, if a man does not have a strong will to win (get) the final victory, he will never succeed in his life. He is no more than a failure.It is quite obvious that there is no difficult thing (nothing difficult) in the world. if you make up your mind to do it, you will certainly accomplish your end. That stands to reason.</p>
</body>
</html>/* 第一个字母设置像素为50px */
::first-letter{
font-size: 50px;
}
/* 第一行设置绿色 */
::first-line{
color: green;
}
/* 鼠标选中的字体背景设置为橙色 */
::selection{
background-color: sandybrown;
}
/* 元素p内容开始之前添加符号 ☛，结尾添加符号☚，注意该符号鼠标无法被选中*/
p::before{
content: "☛";
}
p::after{
content: "☚";
}
(Learning video sharing: css video tutorial)
The above is the detailed content of What are the functions of the four css hyperlink pseudo-classes?. For more information, please follow other related articles on the PHP Chinese website!
What are the limitations of React?May 02, 2025 am 12:26 AMReact'slimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem,2)SEOchallengeswithclient-siderendering,3)potentialperformanceissuesinlargeapplications,4)complexstatemanagementasappsgrow,and5)theneedtokeepupwithitsrapidevolution.Thesefactorsshou
React's Learning Curve: Challenges for New DevelopersMay 02, 2025 am 12:24 AMReactischallengingforbeginnersduetoitssteeplearningcurveandparadigmshifttocomponent-basedarchitecture.1)Startwithofficialdocumentationforasolidfoundation.2)UnderstandJSXandhowtoembedJavaScriptwithinit.3)Learntousefunctionalcomponentswithhooksforstate
Generating Stable and Unique Keys for Dynamic Lists in ReactMay 02, 2025 am 12:22 AMThecorechallengeingeneratingstableanduniquekeysfordynamiclistsinReactisensuringconsistentidentifiersacrossre-rendersforefficientDOMupdates.1)Usenaturalkeyswhenpossible,astheyarereliableifuniqueandstable.2)Generatesynthetickeysbasedonmultipleattribute
JavaScript Fatigue: Staying Current with React and Its ToolsMay 02, 2025 am 12:19 AMJavaScriptfatigueinReactismanageablewithstrategieslikejust-in-timelearningandcuratedinformationsources.1)Learnwhatyouneedwhenyouneedit,focusingonprojectrelevance.2)FollowkeyblogsliketheofficialReactblogandengagewithcommunitieslikeReactifluxonDiscordt
Testing Components That Use the useState() HookMay 02, 2025 am 12:13 AMTotestReactcomponentsusingtheuseStatehook,useJestandReactTestingLibrarytosimulateinteractionsandverifystatechangesintheUI.1)Renderthecomponentandcheckinitialstate.2)Simulateuserinteractionslikeclicksorformsubmissions.3)Verifytheupdatedstatereflectsin
Keys in React: A Deep Dive into Performance Optimization TechniquesMay 01, 2025 am 12:25 AMKeysinReactarecrucialforoptimizingperformancebyaidinginefficientlistupdates.1)Usekeystoidentifyandtracklistelements.2)Avoidusingarrayindicesaskeystopreventperformanceissues.3)Choosestableidentifierslikeitem.idtomaintaincomponentstateandimproveperform
What are keys in React?May 01, 2025 am 12:25 AMReactkeysareuniqueidentifiersusedwhenrenderingliststoimprovereconciliationefficiency.1)TheyhelpReacttrackchangesinlistitems,2)usingstableanduniqueidentifierslikeitemIDsisrecommended,3)avoidusingarrayindicesaskeystopreventissueswithreordering,and4)ens
The Importance of Unique Keys in React: Avoiding Common PitfallsMay 01, 2025 am 12:19 AMUniquekeysarecrucialinReactforoptimizingrenderingandmaintainingcomponentstateintegrity.1)Useanaturaluniqueidentifierfromyourdataifavailable.2)Ifnonaturalidentifierexists,generateauniquekeyusingalibrarylikeuuid.3)Avoidusingarrayindicesaskeys,especiall
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
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),
Atom editor mac version download
The most popular open source editor
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
SublimeText3 Chinese version
Chinese version, very easy to use
