CSS pseudo-class

CSS Pseudo-classes

CSS pseudo-classes are used to add some special effects to selectors.

Syntax

Pseudo class syntax:

selector:pseudo-class {property:value;}

CSS classes can also use pseudo-classes:

selector.class:pseudo-class {property:value;}

##anchor pseudo-class

In browsers that support CSS, different states of links can be displayed in different ways. In our css link we have learned a little bit

Example

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        a:link {color:#FF0000;}    /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已浏览过的链接 */
        a:hover {color:#FF00FF;}   /* 鼠标划过的链接 */
        a:active {color:#0000FF;}  /* 已选中的链接 */
    </style>
</head>

<body>
<p><b><a href="" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

Note: a:hover is required After a:link and a:visited, they need to be in strict order to see the effect.

Note: a:active must come after a:hover.

Note: Pseudo-class names are not case-sensitive.

Run the program and try it

Pseudo classes and CSS classes

Pseudo classes can be used in conjunction with CSS classes ：

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html ">CSS Syntax< /a>

If the link in the above example has been visited, it will appear in red.

Example

Use: focus

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        input:focus
        {
            background-color:yellow;
        }
    </style>
</head>

<body>
<form action="" method="get">
    姓名: <input type="text" name="fname" /><br>
    留言: <input type="text" name="content" /><br>
    <input type="submit" value="Submit" />
</form>


</body>
</html>

Run the program and try it

All CSS pseudo-classes/elements

##:after p:afterInsert content after each <p> element:lang(p:lang(it)Select a starting value for the lang attribute of the <p> element

Selector	Example	Example description
:checked	input :checked	Select all checked form elements
:disabled	input:disabled	Select all disabled form elements
:empty	p:empty	Select all p elements that have no child elements
:enabled	input:enabled	Select all enabled form elements
:first-of-type	p:first-of -type	Selects the first p child element of each parent element that is a p element
:in-range	input:in-range	Select values within the specified range of elements
:invalid	input:invalid	Select all invalid elements
:last-child	p:last-child	Select the last child element of all p elements
:last-of-type	p:last-of-type	Select each p element that is the last p element of its parent element
:not(selector)	:not(p)	Select all elements except p
:nth-child(n)	p:nth-child(2)	Select the second child element of all p elements
:nth-last-child(n)	p:nth-last-child(2)	Select the second-to-last child element of all p elements
:nth-last-of- type(n)	p:nth-last-of-type(2)	Select the second to last child element of p
:nth-of-type(n)	p:nth-of-type(2)	Select all p elements whose second child element is p
:only-of-type	p:only-of-type	Select all elements with only one child element being p
:only-child	p:only-child	Select all p elements that have only one child element
:optional	input:optional	Select element attributes without "required"
:out-of-range	input :out-of-range	Select element attributes with values outside the specified range
:read-only	input:read-only	Select element attributes with read-only attributes
:read-write	input:read-write	Select elements without read-only attributes Element attributes
:required	input:required	Select the element attributes specified by the "required" attribute
:root	root	Select the root element of the document
:target	#news:target	Select the current active #news element (the click URL contains the name of the anchor)
:valid	input:valid	Select all attributes with valid values
:link	a :link	Select all unvisited links
:visited	a:visited	Select all visited links
:active	a:active	Select the active link
:hover	a:hover	The state of placing the mouse on the link
:focus	input:focus	Select element input After has focus
:first-letter	p:first-letter	Select the first letter of each <p> element
:first-line	p:first-line	Select the first line of each <p> element
:first-child	p:first-child	The selector matches the <]p> element that is the first child element of any element
:before	p:before	Insert content before each <p> element

language)

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> input:focus { background-color:yellow; } </style> </head> <body> <form action="" method="get"> 姓名: <input type="text" name="fname" /><br> 留言: <input type="text" name="content" /><br> <input type="submit" value="Submit" /> </form> </body> </html>

submit Reset Code

Automatic operation

Previous section Next Section

Tutorial List

get help

Course Recommendations
Courseware download

The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~

Students who have watched this course are also learning

CSS pseudo-class

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]