CSS3 UI 요소 상태 의사 클래스 선택기 분석
- 不言원래의
- 2018-06-14 16:30:241612검색
이 글에서는 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을 지원하지 않음
E:disabled firefox, safari, Opera, chrome 지원 지원하지 않음 ie8
E :read-only 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:indeterminate -
E:invalid 파이어폭스, 사파리, 오페라, 크롬 지원 ie8 지원 안 함
E:valid Firefox, Safari, Opera 및 chrome 지원 ie8 지원 안 됨
E:required firefox, safari, Opera, chrome 지원 ie8 지원 안 됨
E:선택 사항 firefox, safari, Opera, chrome 지원 ~ | 지원되지 않습니다
다음은 사용에 대한 자세한 지침입니다.
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: 불확정 선택기는 페이지가 열릴 때 라디오 버튼 상자 그룹의 단일 라디오 버튼 상자가 선택된 상태로 설정되지 않은 경우 전체 라디오 버튼 상자 그룹의 스타일을 지정하는 데 사용됩니다.
<!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: 잘못된 의사 클래스 선택기는 요소 콘텐츠를 사용할 수 없는 경우를 지정하는 데 사용됩니다. 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>위 내용은 이 글의 전체 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 참고해주세요!
관련 권장 사항:
CSS에서 투명도를 설정하기 위해 rgba와 불투명도를 사용하는 것의 차이점 분석
위 내용은 CSS3 UI 요소 상태 의사 클래스 선택기 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!