CSS伪类选择器全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/zzlwei/article/details/106643640

伪类选择器的分类

链接伪类选择器：
E:link
E:visited

用户行为选择器：
E:hover
E:active
E:focus

语言伪类选择器：E:lang(fr)

否定伪类选择器：E:not(s)

结构性伪类选择器：
E:root
E:first-child
E:last-child
E:only-child
E:nth-child(n)
E:nth-last-child(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-last-of-type(n)
E:empty

用户界面(UI)元素状态伪类选择器：
E:checked
E:enabled
E:disabled

目标伪类选择器：E:target

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* E:link */
			/* 设置超链接a在未被访问前的样式。 */
			a:link {
				text-decoration: none;
				color: blue;
			}

			/* E:visited */
			/* 设置超链接a在其链接地址已被访问过时的样式。 */
			a:visited {
				text-decoration: none;
				color: purple;
			}

			/* E:hover */
			/* 设置元素在其鼠标悬停时的样式。 */
			a:hover {
				text-decoration: none;
				color: red;
			}

			/* E:active */
			/* 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 */
			a:active {
				text-decoration: none;
				color: yellow;
			}

			/* a:hover 必须位于 a:link 和 a:visited 之后
			a:active 必须位于 a:hover 之后 */

			/* E:focus */
			/* 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。 */
			input:focus {
				background: #f6f6f6;
				color: #f60;
				border: 1px solid #f60;
			}

			/* E:lang(fr) */
			/* 匹配使用特殊语言的E元素。 */
			p:lang(zh-cmn-Hans) {
				color: #f00;
			}

			p:lang(en) {
				c

伪类选择器小实例