简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

青灯夜游
풀어 주다： 2022-08-03 12:09:49
원래의
2476명이 탐색했습니다.

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

UI 상태 의사 클래스 선택기는 특정 상태에서 UI 요소를 선택하는 데 사용됩니다. 주로 HTML 양식에 사용되며, 양식 요소의 다양한 상태에 따라 다양한 스타일이 정의되어 사용자 경험을 향상시킵니다.

UI 상태 의사 클래스 선택기의 특징: 지정된 스타일은 특정 상태에서만 작동합니다.

양식 요소의 상태에는 포커스 획득, 포커스 상실, 선택됨, 선택 취소됨, 사용 가능, 사용할 수 없음, 유효함, 유효하지 않음, 필수, 선택사항, 읽기 전용 등

UI 상태 의사 클래스 선택기
selector 함수 설명 version
E:focused 양식에서 초점이 맞춰진 요소를 선택하세요 3
E:확인했어요 선택 양식에서 선택한 라디오 또는 체크박스 요소 3
E:enabled 선택 양식에서 사용할 수 있는 요소 3
E:disabled 선택 양식에서 사용할 수 없음(예: 비활성화됨) ) ) 요소 3
E:valid 양식에 채워진 내용이 요구 사항을 충족하는 요소를 선택하세요. 3
E:invalid 양식에 채워진 내용이 요구 사항을 충족하지 않는 요소를 선택하세요. 잘못된 URL 또는 이메일과 같은 요구 사항 또는 패턴 속성에 지정된 패턴과 일치하지 않습니다 3
E:in-range 양식에 입력한 숫자가 유효한 범위 내에 있는 요소를 선택하세요 3
E:out-of-range 양식에 입력한 숫자가 유효 범위를 벗어난 요소를 선택하세요 3
E:required 양식에 필요한 요소를 선택하세요 3
E:선택 사항 필수 속성은 선택 양식에 허용되며 필수로 지정되지 않은 요소는 필수로 지정되지 않습니다. 3
E:read-only 상태가 읽기인 선택 양식의 요소 only 3
E:읽기-쓰기 읽기 전용이 아닌 요소를 양식에서 선택하세요. 3
E:default 선택된 상태에 있는 라디오 상자 또는 확인란을 선택하세요. 기본적으로 사용자가 라디오 버튼 또는 확인란 컨트롤의 선택된 상태가 선택되지 않은 상태로 설정되고 E:기본 선택기에 지정된 스타일이 여전히 유효한 경우에도 마찬가지입니다 3
E: indeterminate 선택기 형태의 라디오 선택 그룹 상자에서 라디오 버튼 상자가 선택되지 않은 경우 전체 라디오 버튼 상자 세트의 스타일 사용자가 라디오 버튼 상자 중 하나를 선택하면 스타일이 지정되지 않습니다 3

1.E:hover selector

는 마우스 포인터가 요소 위로 이동할 때 요소에서 사용되는 스타일을 지정하는 데 사용됩니다.

사용 방법: 

<元素>:hover{ 
CSS样式 
}
로그인 후 복사

""에 추가할 수 있습니다. 요소의 유형 속성입니다.

예: 

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>
로그인 후 복사

실행 결과는 아래와 같습니다.

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

2.E:active selector

:active: 링크 클릭 시 스타일을 정의합니다. :active：定义点击链接时的样式。

通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px solid red;
            color: red;
        }
        a:hover {
            background: #9c6ae1;
            border: 1px solid black;
            color: black;
        }
        a:active {
            background: #000;
            border: 1px solid black;
            color: white;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>
로그인 후 복사

运行结果如下图所示：

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

3、E:link选择器

:link：定义普通或未访问链接的样式；

通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>
로그인 후 복사

运行结果如下图所示：

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

4、E:visited选择器

:visited：定义已经访问过链接的样式；

通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        a {
            text-decoration: none;
        }
        a:link {
            font-size: 18px;
            border: 1px solid black;
            padding: 5px;
            margin-left: 10px;
            background: #ccc;
            color: black;
        }
        a:visited {
            background: #FFFF99;
            border: 1px soild red;
            color: red;
        }
    </style>
</head>
<body>
    <a href=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>
로그인 후 복사

运行结果如下图所示：

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

5、E:focus选择器

:focus
:active 의사 클래스 선택기를 통해 링크 클릭 시 스타일을 정의할 수 있습니다. 샘플 코드는 다음과 같습니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
            background: green;
        }
        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }
        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;
        }
    </style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br />
<br />
密码：<input type="password" placeholder="请输入密码"></form>
</body>
</html>
로그인 후 복사

실행 결과는 다음과 같습니다.

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

3. E:link selector:link: 일반 링크 또는 방문하지 않은 링크의 스타일을 정의합니다.

다음을 통해 일반 링크 또는 방문하지 않은 링크의 스타일을 설정할 수 있습니다. :link 의사 클래스 선택기의 샘플 코드는 다음과 같습니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;
        }
    </style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>
로그인 후 복사

실행 결과는 다음과 같습니다.

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

4.E: 방문 선택기

:visited: 방문한 링크의 스타일을 정의합니다.

:visited</code를 통해 방문한 링크의 스타일을 설정할 수 있습니다. > 의사 클래스 선택기 샘플 코드는 다음과 같습니다. <br/> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;title&gt;read-only伪类选择器与E:read-write伪类选择器&lt;/title&gt; &lt;style&gt; input[type=&quot;text&quot;]:read-only{ background: #000; color: green; } input[type=&quot;text&quot;]:read-write{ color: #ff6600; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;read-only伪类选择器与E:read-write伪类选择器&lt;/h1&gt; &lt;form&gt; 姓名：&lt;input type=&quot;text&quot; placeholder=&quot;请输入姓名&quot; value=&quot;winson&quot; readonly&gt; &lt;br /&gt; &lt;br /&gt; 学校：&lt;input type=&quot;text&quot; placeholder=&quot;请输入学校&quot;&gt;&lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</pre><div class="contentsignin">로그인 후 복사</div></div></p>실행 결과는 다음과 같습니다. <p><img src="https://img.php.cn/upload/image/950/708/406/165949913875271CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사" title="165949913875271CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사" alt="CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사"/><img src="https://img.php.cn/upload/image/358/879/819 /165949880722497CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사" title="165949880722497CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사" alt=" CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사"/></p><p><strong><span style="max-width:90%">5.E:focus selector</span></strong></p><p><code>:focus: 스타일을 지정하는 데 사용됩니다. 커서 포커스를 얻기 위해 요소에서 사용됩니다.

샘플 코드는 다음과 같습니다: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态： <input type="checkbox">水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>
로그인 후 복사
CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사


6 E: 활성화된 의사 클래스 선택기 및 E: 비활성화된 의사 클래스 선택기CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사1) , E:enabled 선택기는 요소가 사용 가능 상태일 때 스타일을 지정하는 데 사용됩니다.

2) E:disabled 선택기는 요소가 비활성화된 상태일 때 스타일을 지정하는 데 사용됩니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态： <input type="checkbox" checked>水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>
로그인 후 복사

7. E: 읽기 전용 의사 클래스 선택기 및 E: 읽기-쓰기 의사 클래스 선택기

1CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사

1), E: 읽기 전용 선택기는 요소가 언제 사용되는지 지정하는 데 사용됩니다. 읽기 전용 상태의 스타일입니다.

2) E:read-write 선택기는 요소가 읽기 전용이 아닌 상태일 때 스타일을 지정하는 데 사용됩니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别： <input type="radio">男 <input type="radio">女</form>
</body>
</html>
로그인 후 복사


8, 의사 클래스 선택기 E:checked, E:default and indeterminate

1), E:cehcked 의사 클래스 선택기는 라디오 라디오 버튼 또는 확인란을 형식으로 지정하는 데 사용됩니다. 체크박스가 선택되었을 때의 스타일입니다. 2) E:default 선택기는 페이지가 열릴 때 기본적으로 선택되는 라디오 버튼 또는 체크박스 컨트롤의 스타일을 지정하는 데 사용됩니다. 3) E:indeterminate 선택기는 페이지가 열릴 때 라디오 버튼 상자 그룹의 단일 라디오 버튼 상자가 선택된 상태로 설정되지 않은 경우 전체 라디오 버튼 상자 그룹의 스타일을 지정하는 데 사용됩니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<input type="text" placeholder="文本">
</body>
</html>
로그인 후 복사
🎜🎜🎜🎜기본 선택 🎜🎜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱"></form>
</body>
</html>
로그인 후 복사
🎜🎜🎜
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	</head>
	<body>
		<h1>E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>
로그인 후 복사
로그인 후 복사
🎜🎜🎜🎜🎜🎜9. 의사 클래스 선택기 E::selection🎜🎜🎜🎜E:selection 의사 클래스 선택기는 언제를 지정하는 데 사용됩니다. 요소는 selected 상태의 스타일입니다. 🎜
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
            color: #ffffff;
            background: green;
 
        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>
로그인 후 복사
로그인 후 복사
🎜🎜🎜🎜🎜🎜10. E: 잘못된 의사 클래스 선택기 및 E: 유효한 의사 클래스 선택기🎜🎜🎜🎜1), E: 잘못된 의사 클래스 선택기는 요소 콘텐츠를 사용할 수 없는 시기를 지정하는 데 사용됩니다. HTML5를 통해 요소 내용이 요소가 지정한 형식과 일치하지 않는 경우 요소의 요구사항이나 스타일 등의 속성으로 지정된 검사를 수행합니다. 🎜 2) E:valid 의사 클래스 선택기는 요소의 필수 속성과 같은 속성을 사용하여 요소 내용이 HTML5에서 지정한 검사를 통과할 수 있거나 요소 내용이 요소에서 지정한 형식을 따르는 경우 스타일을 지정하는 데 사용됩니다. . 🎜rrreee🎜🎜🎜11. E: 필수 의사 클래스 선택기 및 E: 선택적 의사 클래스 선택기🎜🎜🎜

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>E:required伪类选择器与E:optional伪类选择器</title>
		<style>
			input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
	</head>
	<body>
		<h1>E:required伪类选择器与E:optional伪类选择器</h1>
		<form>
			姓名：<input type="text" placeholder="请输入姓名" required>
			<br />
			<br />
			学校：<input type="text" placeholder="请输入学校"></form>
	</body>
</html>
로그인 후 복사
로그인 후 복사

12、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
            color: #ffffff;
            background: green;
 
        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>
로그인 후 복사
로그인 후 복사

1CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사  

各UI元素状态伪类选择器受浏览器的支持情况

选择器 Firefox Safari Opera IE8 Chrome
E:hover √ √ √ √ √
E:active √ √ √ x √
E:focus √ √ √ √ √
E:enable √ √ √ x √
E:disable √ √ √ x √
E:read-only √ x √ x x
E:read-write √ x √ x x
E:checked √ √ √ x √
E:default √ x x x x
E:indeterminate √ √ x √ √
E:selection √ √ √ x √

（学习视频分享：web前端入门）

위 내용은 CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
css ui状态伪类选择器
원천：php.cn
이전 기사：CSS 상자 모델 및 상자 크기 조정 속성 소개 다음 기사：CSS 텔레스코픽 상자 레이아웃(요약 공유)
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
WordPress 6.0(add_editor_style)은 Gutenberg 편집기에서 style.css를 로드하지 않습니다. 저는 맞춤형 WordPress 블록 테마를 만들기 위해 UdemyWordPress 과정을 수강하고 있습니다. function.php에 블록 유형을 성공적으로 등록...
에서 2023-11-12 20:37:50
0
2
261
큰 숫자에서는 작동하지 않는 소수의 CSS 선행 0 최근에 100개가 넘는 목록 항목이 포함된 순서가 지정된 목록을 생성하는 문제에 직면했습니다. 나는 list-style:decimal-leading-zero;ol...
에서 2023-11-07 10:35:53
0
1
236
Sass 오류: 파일이 이미 로드되었습니다: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss 저는 퀘이사 프레임워크를 사용하고 있으며 프로젝트를 컴파일하는 동안 위의 오류 모듈 빌드 실패(./node_modules/sass-loader/dist/cjs.j...
에서 2023-11-06 21:38:55
0
1
219
HTML/CSS에 배경 비디오를 삽입하는 방법은 무엇입니까? 안녕하세요 여러분, 최근에 문제가 발생했습니다. 내 웹사이트에 비디오 배경을 설정하려고 하는데 중앙에 있는 텍스트가 맨 아래까지 계속 실행됩니다. 이유는 모르겠지...
에서 2023-11-06 13:59:13
0
1
240
JavaScript에서 색상이라는 CSS/HTML의 RGB 값을 얻는 방법 [name-rgb]라는 Javascript 개체를 만들었습니다. 기본: 명명된Colors={AliceBlue:[240,248,255],AntiqueWhite:[2...
에서 2023-11-06 09:05:50
0
2
210
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！