この記事では、CSS の疑似クラス セレクターと疑似要素セレクターについて説明します。必要な方は参考にしてください。
1. 疑似クラスをリンクします
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>3. プライバシーと:visited セレクター
4. フォーム関連の疑似クラス
1. フォーム関連の疑似クラス /*动态伪类*/ 注意:hover，:active基本可以作用于所有的元素！
:hover 表示悬浮到元素上
:active 表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！2. コード例: 01_form status.html
<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>02_form status.html/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接 ： color background-color border-color03_ フォーカスを取得します。 html
/*表单相关伪类*/
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单04_Simulate radio button.html<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>4. 構造疑似クラス 2. コード例:
<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ええ05_empty.html
<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没关系)before.html<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>
firstLetter.html<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> firstLine.html りー selection.html<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 の例でのセレクター タイプの概要と効率の比較
以上がCSS の疑似クラス セレクターと疑似要素セレクターのコード分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
css中hover什么意思Feb 22, 2024 pm 01:24 PMCSS中的:hover是一种伪类选择器，用于在用户悬停在特定元素上时，应用特定的样式。当鼠标悬停在元素上时，可以通过:hover为其添加不同的样式，从而增强用户体验和交互效果。本文将详细讨论:hover的含义以及给出具体的代码示例。首先，让我们了解一下CSS中:hover的基本用法。在CSS中，可以通过选择器来选中要应用:hover效果的元素，并在其后面加上
css中的li标签怎么去除前面的圆点Apr 28, 2024 pm 12:36 PMCSS中去除li标签圆点的方法有两种：1.使用"list-style-type: none;"样式；2.使用透明图片和"list-style-image: url("transparent.png");"样式。两种方法都能删除所有li标签的圆点，如果您只想删除某些li标签的圆点，可以使用伪类选择器。
如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式Nov 20, 2023 am 11:52 AM如何使用:nth-child(-n+5)伪类选择器选择位置小于等于5的子元素的CSS样式在CSS中，伪类选择器是一种强大的工具，可以通过特定的选择方式来选取HTML文档中的某些元素。其中，:nth-child()是一种常用的伪类选择器，可以选择特定位置的子元素。:nth-child(n)可以匹配HTML中的第n个子元素，而:nth-child(-n)可以匹配
使用CSS中的content属性Feb 19, 2024 am 10:56 AMCSS中content属性的用法CSS中的content属性是一个非常有用的属性，它是用来在伪类中插入额外的内容的。content属性一般只能在伪类选择器（如::before和::after）中使用，它可以用来插入文本或者图片等内容。我们可以通过content属性实现一些非常炫酷的效果。下面是content属性的一些用法以及具体的代码示例：插入文本内容通过
css中hover怎么使用Feb 23, 2024 pm 12:06 PMCSS中的hover伪类是一个非常常用的选择器，它允许我们在鼠标悬停在元素上时改变其样式。本文将为大家介绍hover的用法，并提供具体的代码示例。一、基本用法要使用hover，我们需要先为该元素定义一个样式，然后使用:hover伪类来制定鼠标悬停时对应的样式。例如，我们有一个button元素，当鼠标悬停在按钮上时，我们希望按钮的背景色变为红色，文字颜色变为白
使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式Nov 20, 2023 am 11:22 AM使用:nth-last-child(2)伪类选择器选择倒数第二个子元素的样式，需要具体代码示例在CSS中，伪类选择器是一种非常强大的工具，可以用来选择文档树中特定的元素。其中之一就是:nth-last-child(2)伪类选择器，它可以选择倒数第二个子元素并对其应用样式。首先，让我们来创建一个示例HTML文档，以便我们可以在其中使用这个伪类选择器。以
不同种类的CSS3选择器Feb 18, 2024 pm 11:02 PMCSS3选择器有多种类型，它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型，并提供具体的代码示例。基本选择器：元素选择器：使用元素名称作为选择器，此处以p元素为例：p{color:red;}类选择器：使用类名作为选择器，以.开头，此处以class为example的元素为例：.example{fo
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
