この記事では、CSS の疑似クラス セレクターと疑似要素セレクターについて説明します。必要な方は参考にしてください。
1. 疑似クラスをリンクします
/*链接伪类*/ 注意:link，:visited，:target是作用于链接元素的！
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，并指向一个已访问的地址的所有锚
:target 代表一个特殊的元素，它的id是URI的片段标识符2. コード例:
01_anchor pseudo-class.html
<head>
<meta charset="UTF-8">
<title></title>
<!--:link：表示作为超链接，并指向一个未访问的地址的所有锚-->
<style type="text/css">
a{ text-decoration: none; }
a:link{ color: deeppink; }
#test:link{ background: pink; }
</style>
</head>
<body>
<a href="#">点我点我点我</a>
<p id="test">我是p啦</p>
</body>02_anchor pseudo-class.html _ターゲット.html
<head>
<meta charset="UTF-8">
<title></title>
<!--:visited：表示作为超链接，并指向一个已访问的地址的所有锚-->
<style type="text/css">
a{ text-decoration: none; }
a:link{ color: black; }
a:visited{ color: pink; }
</style>
</head>
<body>
<a href="#">点我点我点我</a>
</body>2. 動的疑似クラス
2. コード例:<head>
<meta charset="UTF-8">
<title></title>
<!--:target 代表一个特殊的元素，这个元素的id是URI的片段标识符。-->
<style type="text/css">
*{ margin: 0; padding: 0; }
p{ width: 300px; height: 200px; line-height: 200px; background: black; color: pink; text-align: center; display: none; }
:target{ display: block; }
</style>
</head>
<body>
<a href="#p1">p1</a>
<a href="#p2">p2</a>
<a href="#p3">p3</a>
<p id="p1">
p1 </p>
<p id="p2">
p2 </p>
<p id="p3">
p3 </p>
</body>
4. フォーム関連の疑似クラス
1. フォーム関連の疑似クラス /*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！ <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test:hover{ color: pink; }
#test:active{ color: red; }
</style>
</head>
<body>
<p id="test">
我是test </p>
</body>/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接 ： color background-color border-color
/*表单相关伪类*/
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
input { width: 100px; height: 30px; color: #000; }
input:enabled { color: red; }
input:disabled { color: blue; }
</style>
</head>
<body>
<input type="text" value="晓飞张" />
<input type="text" value="晓飞张" disabled="disabled" />
</body><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
input:checked { width: 100px; height: 100px; }
</style>
</head>
<body>
<input type="checkbox" />
</body>04_not.html
rrreええ<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{ background: pink; }
p:focus{ background: pink; }
</style>
</head>
<body>
<input type="text" value="" />
<p style="width: 200px;height: 200px;background: deeppink;" contenteditable="true" ></p>
</body>5. 疑似要素
1. 疑似要素<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
label { float: left; margin: 0 5px; overflow: hidden; position: relative; }
label input { position: absolute; left: -50px; top: -50px; }
span { float: left; width: 50px; height: 50px; border: 3px solid #000; }
input:checked~span { background: red; }
</style>
</head>
<body>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
<label>
<input type="radio" name="tab" />
<span></span>
</label>
</body>
after.html
/*结构性伪类*/index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd #wrap ele:nth-child(index) 表示匹配#wrap中第index的子元素 这个子元素必须是ele #wrap ele:nth-of-type(index) 表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一个很重要的区别！！
nth-of-type以元素为中心！！！
:nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
:not :empty(内容必须是空的，有空格都不行，有attr没关系)<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*子元素的标签应该要统一*/
/*ul .item:nth-child(3){
border: 1px solid;
}*/
ul .item:nth-of-type(3){ border: 1px solid; }
/*ul p:nth-of-type(3){
border: 1px solid;
}
ul p:nth-of-type(3){
border: 1px solid;
}
ul li:nth-of-type(3){
border: 1px solid;
}*/
</style>
</head>
<body>
<ul>
<p class="item">p1</p>
<p class="item">p2</p>
<p class="item">p3</p>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<p class="item">p1</p>
<p class="item">p2</p>
<p class="item">p3</p>
<li class="item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="item">9</li>
</ul>
</body><head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* { margin: 0; padding: 0; border: none; }
a { text-decoration: none; color: #333; font-size: 14px; display: block; float: left; width: 100px; height: 30px; }
p { width: 800px; margin: 0 auto; }
p>a:not(:last-of-type) { border-right: 1px solid red; }
</style>
</head>
<body>
<p>
<a href="#">first</a>
<a href="#">second</a>
<a href="#">third</a>
<a href="#">fourth</a>
<a href="#">fifth</a>
</p>
</body><head>
<meta charset="UTF-8">
<title>empty</title>
<style type="text/css">
p { height: 200px; background: #abcdef; }
p:empty { background: #f00; }
</style>
</head>
<body>
<p></p>
<p>Second</p>
<p></p>
<p>Third</p>
</body>CSS の例でのセレクター タイプの概要と効率の比較
以上がCSS の疑似クラス セレクターと疑似要素セレクターのコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
