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

소위 UI 요소 상태 의사 클래스는 주로 양식 요소의 다양한 상태 스타일을 제어하는 의사 클래스 선택자입니다.
사용 가능하거나 사용할 수 없는 텍스트 상자, 선택되거나 선택되지 않은 확인란 및 라디오 버튼 등과 같은 양식 요소의 다양한 상태

CSS 3에는 11개의 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/*只支持Opera*/

하나씩 설명:

1.E: 호버 선택기는 마우스 포인터가 위로 움직일 때 요소에서 사용되는 스타일을 지정하는 데 사용됩니다. 그것.
2.E:active selector는 요소가 활성화될 때(마우스를 요소 위에서 눌렀지만 놓지 않은 경우) 사용되는 스타일을 지정하는 데 사용됩니다.
3.E: 포커스 선택기는 요소가 포커스를 받을 때 사용할 스타일을 지정하는 데 사용됩니다. 주로 텍스트박스 컨트롤에 포커스가 있을 때 사용되며, 텍스트 입력에 사용됩니다.
4:E:enabled 선택기는 현재 요소가 사용 가능한 상태일 때 스타일을 지정하는 데 사용됩니다.
5:E:disabled 선택기는 현재 요소가 사용 불가능한 상태일 때 스타일을 지정하는 데 사용됩니다.
6.E:read -only 선택기는 요소가 읽기 전용 상태일 때 스타일을 ff 아래에 -moz-read-only 형식으로 작성해야 하는 시기를 지정하는 데 사용됩니다.
7.E: 읽기-쓰기 선택기는 지정하는 데 사용됩니다. 요소가 읽기 전용이 아닌 상태일 때의 스타일입니다. ff 아래에는 -moz-read-write 형식으로 작성해야 합니다.
8.E: 체크된 셀렉터는 양식의 라디오 버튼이나 체크박스가 선택된 상태일 때 스타일을 지정하는 데 사용됩니다. ff 아래에는 -moz-checked 형식으로 작성해야 합니다.
9.E: 기본 선택기는 페이지를 열 때 기본적으로 선택되는 라디오 버튼이나 체크박스의 스타일을 지정하는 데 사용됩니다. 기본적으로 선택된 상태로 설정된 라디오 버튼이나 체크박스를 사용자가 선택되지 않은 상태로 변경하더라도 E:default 셀렉터를 사용하여 설정한 스타일은 여전히 유효하다는 점에 유의해야 합니다.
10.E: 페이지가 열릴 때 라디오 버튼 그룹의 라디오 버튼이 선택된 상태로 설정되지 않은 경우 불확정 선택기는 라디오 버튼 전체 그룹의 스타일을 지정하는 데 사용됩니다. 사용자가 이 그룹의 라디오 버튼을 선택하면 전체 라디오 버튼 그룹의 스타일이 지정되지 않습니다.
11.E::selection 선택기는 요소가 선택될 때 스타일을 지정하는 데 사용됩니다. 여기서 주목해야 할 점은 ff 아래에서 사용할 경우 -moz-selection 형식으로 작성해야 한다는 것입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
ul li{
  list-style:none;
}
input[type='text']:disabled{
  color:green;
}
</style>
</head>
<body>
<ul>
  <li><input type="text" value="php中文网"/></li>
  <li><input type="text" disabled value="php中文网"/></li>
</ul>
</body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style type="text/css"> ul li{ list-style:none; } input[type='text']:disabled{ color:green; } </style> </head> <body> <ul> <li><input type="text" value="php中文网"/></li> <li><input type="text" disabled value="php中文网"/></li> </ul> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear