CSS의 UI 상태 의사 클래스 선택기를 자세히 설명하는 기사-CSS 튜토리얼-php.cn

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 상태 의사 클래스 선택기를 자세히 설명하는 기사

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 상태 의사 클래스 선택기를 자세히 설명하는 기사

4.E: 방문 선택기

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

:visited</code를 통해 방문한 링크의 스타일을 설정할 수 있습니다. > 의사 클래스 선택기 샘플 코드는 다음과 같습니다. <br/> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>read-only伪类选择器与E:read-write伪类选择器</title> <style> input[type="text"]:read-only{ background: #000; color: green; } input[type="text"]:read-write{ color: #ff6600; } </style> </head> <body> <h1>read-only伪类选择器与E:read-write伪类选择器</h1> <form> 姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly> <br /> <br /> 学校：<input type="text" placeholder="请输入学校"></form> </body> </html></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>

로그인 후 복사

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	√