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
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 itPseudo 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>
<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
| 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 |
| p:after | Insert content after each <p> element | |
| language) | p:lang(it)Select a starting value for the lang attribute of the <p> element |
<!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>
None