지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > CSS3 UI 요소 상태 의사 클래스 선택기 분석

CSS3 UI 요소 상태 의사 클래스 선택기 분석

不言
풀어 주다： 2018-06-14 16:30:24
원래의
1615명이 탐색했습니다.

이 글에서는 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 선택기는 마우스 포인터가 요소 위로 이동할 때 사용되는 스타일을 지정하는 데 사용됩니다
사용 방법 ：
:hover{
CSS style
}
""에 요소의 유형 속성을 추가할 수 있습니다.
예:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
의사 클래스 선택기
원천：php.cn
이전 기사：CSS3 레이어 그림자 및 텍스트 그림자 사용 다음 기사：CSS3를 사용하여 이미지 뒤집기 효과 얻기
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2284
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2421
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2036
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1919
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1994
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿