CSS3 선택기(읽기-쓰기 및 :읽기 전용)란 무엇입니까? 사용하는 방법?

이 글의 내용은 CSS3 선택자(읽기-쓰기 및 :읽기 전용?)가 무엇인지 소개하는 것입니다. 사용 방법, CSS3의 :read-write 선택기와 :read-only 선택기가 무엇인지, 무엇을 하는지, 어떻게 사용하는지 모두에게 알려주세요. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css3 :read-write

:read-write는 CSS의 의사 클래스 선택기로, 사용자 편집 가능한 요소, 즉 읽기 및 쓰기 가능한 요소를 일치시키는 데 사용됩니다.

Elements는 editable 카테고리에 포함됩니다:

1. 읽기 전용이 아니고 비활성화되지 않은 요소(모든 유형). 이는 읽기 전용이나 비활성화된 속성 세트가 없음을 의미합니다.

2. 읽기 전용도 아니고 비활성화도 아닌 요소입니다(입력과 유사).

3. 또는 가 아니지만 contenteditable 속성이 설정된 기타 요소.

참고: 현재 대부분의 브라우저에서 :read-write 선택기는 입력 및 텍스트 영역 요소를 설정하는 데만 사용할 수 있습니다.

css3 :read-only

:read-only는 CSS의 의사 클래스 선택자이기도 하며 :read-write 선택기와 일치하지 않는 모든 요소와 일치합니다.

즉, :read-only 의사 클래스 선택기는 사용자가 편집할 수 없는 요소와 일치합니다. 즉, 위에서 편집할 수 없는 모든 요소와 일치합니다 ↑. 예: 읽기 전용 또는 비활성화된 세트와 같은 속성이 있는 요소.

다음은 :read-write를 사용하여 일치할 수 있는 요소의 예입니다.

< input  type = “text” >
< input  type = “number” >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10” >  </ textarea >
< div  class = “random”  contenteditable >  </ div >

다음은 :read-write를 사용하여 일치할 수 없는 요소의 예, 즉 :read를 사용하여 일치할 수 있는 요소의 예입니다. -only:

< input  type = “text”  disabled >
< input  type = “number”  disabled >
< input  type = “number”  readonly >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10”  readonly >  </ textarea >
< div  class = “random” >  </ div >  <！ - 无法使用contenteditable编辑的常规元素 - >

사양에서 권장하는 동작이지만 브라우저 동작은 다양해 보입니다. 한 브라우저에서 읽기-쓰기로 간주되는 것이 다른 브라우저에서는 읽기 전용으로 간주되므로 우리는 :read-write 스타일을 사용합니다. 적용됨 일부 브라우저에서는 작동하지 않을 수 있습니다.

다른 의사 클래스 선택기와 마찬가지로 :read-write 선택기와 :read-only 선택기는 모두 :hover 및 의사 요소 ::after와 같은 다른 선택기와 연결될 수 있습니다.

예를 들어 :read-write+:focus는 편집 가능한 텍스트 영역의 스타일을 지정합니다.

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}

예를 들어 :read-only + :hover는 페이지의 div(일반) 스타일을 지정합니다.

div:read-only:hover {
    background-color: #eee;
}

div:read-only:before {
    content: "?";
    color: deepPink;
}

브라우저 지원

표의 숫자는 이 속성을 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

Firefox 브라우저에서는 -moz-read-write, -moz-read-only 접두사를 사용하세요. 읽기-쓰기 선택기와 읽기 전용 선택기는 Internet Explorer와 Android에서 지원되지 않습니다.

요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 추천 관련 비디오 튜토리얼: CSS3 튜토리얼!

위 내용은 CSS3 선택기(읽기-쓰기 및 :읽기 전용)란 무엇입니까? 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!