CSS3에서 사용자 선택 사용법에 대한 자세한 설명

css3의 user-select 사용법에 대한 자세한 설명

user-select 속성은 css3의 새로운 속성으로, 사용자가 텍스트를 선택할 수 있는지 여부를 설정하는 데 사용됩니다. 교체 요소를 제외한 모든 요소에 사용할 수 있습니다. 자세한 내용은 다음 CSS3 문서 설명을 참조하세요.

(1) 구문

user-select:none | text | all | element

기본값 :텍스트

적용 범위:대체 요소를 제외한 모든 요소

(2) 값 설명

none:텍스트를 선택할 수 없습니다

text:텍스트를 선택할 수 있습니다

all: 모든 콘텐츠를 전체적으로 볼 때 선택할 수 있습니다. 컨텍스트에서 하위 요소를 두 번 클릭하거나 클릭하면 선택한 부분은 하위 요소에서 역추적되는 가장 높은 상위 요소가 됩니다.

요소:텍스트를 선택할 수 있지만 선택 범위는 요소 경계에 의해 제한됩니다.

(3) 브라우저 지원

다음 그림은 값이 none|text|all인 경우 각 브라우저의 지원 수준을 나열하고, 값이 요소인 경우 대부분의 브라우저가 이를 지원하지 않으므로 나열되지 않습니다.

(4) 설명

1.IE6-9에서는 이 속성을 지원하지 않지만, user-select:none 및 Safari 및 Chrome의 효과를 얻기 위해 onselectstart="return false;" 태그 속성을 사용합니다. 이 태그 속성을 지원합니다.

2. 이 속성은 Opera12.5까지는 지원되지 않지만 IE6-9과 마찬가지로 프라이빗 라벨 속성의 사용도 지원합니다. unselectable ="on" user-select:none의 효과를 얻으려면 unselectable의 또 다른 값이 off입니다. 3.

Chrome

Safari를 제외하고 다른 브라우저에서는 텍스트가 -ms-user-select:none;으로 설정된 경우 사용자는 이 텍스트 블록 내에서 텍스트 선택을 시작할 수 없습니다. 그러나 사용자가 페이지의 다른 영역에서 텍스트를 선택하기 시작하면 텍스트를 -ms-user-select:none 으로 설정하여 계속해서 해당 영역 텍스트를 선택할 수 있습니다. >4. 해당 스크립트 기능은 userSelect

(5) 예시

css 코드:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html 코드:

아아아앙

                                                                 

CSS3의 User-SELECT에 대한 자세한 설명에서

User-SELECT 속성은 CSS3의 새로운 속성으로 사용자의 선택 여부를 설정하는 데 사용됩니다. 중국어 텍스트를 선택할 수 있습니다. 교체 요소를 제외한 모든 요소에 사용할 수 있습니다. 자세한 내용은 다음 CSS3 문서 설명을 참조하세요.

참조 링크: http://www.php.cn/

(1) 구문

사용자 선택:

없음 | 텍스트 | 전체 | 요소

기본값: 텍스트

적용 범위: 대체 요소를 제외한 모든 요소

(2) 값 설명

없음:

텍스트를 선택할 수 없음

텍스트:텍스트를 선택할 수 있음

all: 은 모든 콘텐츠를 전체적으로 봤을 때 선택할 수 있습니다. 컨텍스트에서 하위 요소를 두 번 클릭하거나 클릭하면 선택한 부분은 하위 요소에서 역추적되는 가장 높은 상위 요소가 됩니다.

요소:텍스트를 선택할 수 있지만 선택 범위는 요소 경계에 의해 제한됩니다.

(3) 브라우저 지원

다음 그림은 값이 none|text|all인 경우 각 브라우저의 지원 수준을 나열하고, 값이 요소인 경우 대부분의 브라우저가 이를 지원하지 않으므로 나열되지 않습니다.

(4) 설명

1.

IE6-9

은 아님 지원됨 이 속성은

user-select:none

Safari 및 의 효과를 얻기 위해 onselectstart="return false;" 태그 속성의 사용을 지원합니다. Chrome이 태그 속성도 지원됩니다.

2. 이 속성은 Opera12.5까지 지원되지 않지만 IE6-9처럼 개인 라벨 속성 사용도 지원합니다unselectable="on " user-select:none 효과를 얻으려면 선택할 수 없음의 또 다른 값은 off입니다.

3. 제외 Chrome 및 Safari 외에도 다른 브라우저에서 텍스트가 -ms-user-select:none;으로 설정된 경우 사용자는 블록 내에서 텍스트 선택을 시작할 수 있습니다. 그러나 사용자가 페이지의 다른 영역에서 텍스트를 선택하기 시작하면 텍스트를 -ms-user-select:none 으로 설정하여 계속해서 해당 영역 텍스트를 선택할 수 있습니다. >

4. 해당 스크립트 기능은

userSelect

(5) 예시

css 코드:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html 코드:

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

CSS3의 user-select 사용법에 대한 더 자세한 설명은 PHP 중국어 홈페이지 관련 글을 참고해주세요!