CSS3의 UI 요소 상태에 대한 의사 클래스 선택기의 예에 대한 자세한 설명
- 巴扎黑원래의
- 2017-08-12 14:45:541486검색
이 글에서는 hover, active 및 focus, 활성화, 비활성화, 읽기 전용 및 읽기-쓰기 등 CSS3의 UI 요소 상태 의사 클래스 선택기를 주로 소개합니다. 필요한 친구들이 참고할 수 있습니다
소위 UI 선택기: 즉, 지정된 스타일은 요소가 특정 상태에 있을 때만 적용되며 기본 상태에서는 작동하지 않습니다!
브라우저 호환성:
E:hover firefox, safari, Opera, ie8, chrome 지원 ------------
E:active firefox, safari, Opera, chrome 지원 ie8 지원 안 됨
E :focus firefox, safari, Opera, ie8, chrome 지원 -------------
E:enabled firefox, safari, Opera, chrome 지원 ie8 지원 안 됨 firefox, safari, Opera, chrome은 ie8을 지원하지 않습니다
E:읽기 전용 firefox, Opera 지원 ie8, safari, chrome을 지원하지 않습니다
E:read-write firefox, Opera를 지원합니다 ie8, safari, chrome을 지원하지 않습니다
E:checked firefox, safari, Opera , chrome ie8을 지원하지 않음
E::selection firefox, safari, Opera, chrome 지원 ie8
E를 지원하지 않음:default firefox만 지원 ~ 아웃 아웃, , 아웃 ---------
E: 유효하지 않음 firefox, safari, Opera, chrome 지원 firefox, safari, Opera, chrome 지원 ie8을 지원하지 않음
E:valid firefox, safari, Opera, chrome 지원 ie8을 지원하지 않음
E:required firefox, safari, Opera, chrome 지원함 ie8 지원 안 함
E:선택 사항 firefox, safari, Opera, chrome 지원 ie8
E:in-range 지원 안 됨 firefox, safari, Opera, chrome 지원 ie8
E:out-of-rang 지원 안 됨 firefox, safari, Opera, chrome은 ie8을 지원하지 않습니다
다음은 자세한 사용법 설명입니다
1. 선택기 E:hover, E:active 및 E:focus
1) E:hover 선택기는 마우스 포인터가 요소 위로 이동할 때 사용되는 스타일을 지정하는 데 사용됩니다
사용 방법 ：
558dc77cf99fee6757323747f07fa144:hover{
CSS style
}
"558dc77cf99fee6757323747f07fa144"에 요소의 유형 속성을 추가할 수 있습니다.
예:
input[type="text"]:hover{
CSS 스타일
}
2) E:active 선택기는 요소가 활성화될 때 사용되는 스타일을 지정하는 데 사용됩니다.
3) E:focus 선택기가 사용됩니다. 커서 포커스를 얻기 위해 요소가 사용하는 스타일을 지정하는 데 사용됩니다. 주로 텍스트 상자 컨트롤이 포커스를 얻어 텍스트 입력을 수행할 때 사용됩니다.
예:
<!DOCTYPE html>
<html>
<head lang="en">
<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>2. E:enabled 의사 클래스 선택기 및 E:disabled 의사 클래스 선택기
1) E:enabled 선택기는 요소가 사용 가능한 상태 스타일.
2) E:disabled 선택기는 요소가 비활성화된 상태일 때 스타일을 지정하는 데 사용됩니다.
예:
<!DOCTYPE html>
<html>
<head lang="en">
<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>3. E:읽기 전용 의사 클래스 선택기 및 E:읽기-쓰기 의사 클래스 선택기
1), E:읽기 전용 선택기가 사용됩니다. 요소가 읽기 전용 상태일 때의 스타일입니다.
2) E:read-write 선택기는 요소가 읽기 전용이 아닌 상태일 때 스타일을 지정하는 데 사용됩니다.
<!DOCTYPE html>
<html>
<head lang="en">
<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>4. E:checked, E:default 및 indeterminate
1) E:cehcked 의사 클래스 선택기는 라디오 라디오 버튼이나 체크박스가 복잡한 경우를 지정하는 데 사용됩니다. 양식 선택 윤곽의 스타일입니다.
2) E:default 선택기는 페이지가 열릴 때 기본적으로 선택되는 라디오 버튼 또는 체크박스 컨트롤의 스타일을 지정하는 데 사용됩니다.
3) E:indeterminate 선택기는 페이지가 열릴 때 라디오 버튼 상자 그룹의 단일 라디오 버튼 상자가 선택된 상태로 설정되지 않은 경우 전체 라디오 버튼 상자 그룹의 스타일을 지정하는 데 사용됩니다.
<!DOCTYPE html>
<html>
<head lang="en">
<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>기본 선택
<!DOCTYPE html>
<html>
<head lang="en">
<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><h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>
<html>
<head lang="en">
<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>5. 의사 클래스 선택자 E::selection
1), E:selection 의사 클래스 선택자는 요소가 언제 선택되는지 지정하는 데 사용됩니다. 선택되었을 때의 스타일입니다.
예를 들어
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>6. E: 잘못된 의사 클래스 선택기 및 E: 유효한 의사 클래스 선택기
1) E: 잘못된 의사 클래스 선택기는 요소 콘텐츠를 지정하는 데 사용됩니다. require와 같은 요소의 속성을 사용하거나 요소의 콘텐츠가 요소에서 지정한 형식을 따르지 않는 경우 지정된 HTML5 스타일을 전달할 수 없습니다.
2) E:valid 의사 클래스 선택자는 요소의 필수 속성과 같은 속성을 사용하여 요소 내용이 HTML5에서 지정한 검사를 통과할 수 있거나 요소 내용이 지정된 형식을 따르는 경우 스타일을 지정하는 데 사용됩니다. 요소.
예를 들어
<!DOCTYPE html>
<html>
<head lang="en">
<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>7.E:필수 의사 클래스 선택기 및 E:선택적 의사 클래스 선택기
1) E:필수 의사 클래스 선택기는 필수 속성을 지정하는 데 사용됩니다. 필수 속성을 지정하는 입력 요소, 선택 요소 및 텍스트 영역 요소의 스타일을 지정합니다.
2) E:선택적 의사 클래스 선택기는 입력 요소의 스타일을 지정하는 데 사용되며 필수 속성을 사용할 수 있는 요소 및 텍스트 영역 요소는 필수 속성이 지정되지 않습니다.
<!DOCTYPE html>
<html>
<head lang="en">
<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>8. E:범위 내 의사 클래스 선택기 및 E:범위 외 의사 클래스 선택기
1) E:범위 내 의사 클래스 선택기를 사용합니다. 요소의 유효한 값은 범위로 제한되어 있으며 실제 입력 값은 이 범위 내에 있습니다.
2) E:out-of-range 의사 클래스 선택자는 요소의 유효 값이 범위로 제한되어 있지만 실제 입력 값이 이를 초과하는 경우 사용할 스타일을 지정하는 데 사용됩니다.
예를 들어
<!DOCTYPE html>
<html>
<head lang="en">
<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>위 내용은 CSS3의 UI 요소 상태에 대한 의사 클래스 선택기의 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!