CSS3 속성 선택기를 사용하여 JS 역할을 대체하는 방법

CSS3에서는 애니메이션, 필터 등 특수 효과 도입과 새로운 레이아웃 기술 외에도 이전에 JS에서만 할 수 있었던 작업이 이제 완료될 수 있다는 것을 알고 있습니다. 다음으로 속성에 따라 요소를 일치시키는 강력한 CSS3

속성 선택기를 소개하겠습니다. 이는 [type]과 같은 단일 속성이거나 [type=checkbox] 또는 [for="email"]과 같은 속성과 값의 조합일 수 있습니다.

속성 선택기를 사용하여 속성 및 하위 문자열의 유무를 일치시킬 수도 있습니다. 예를 들어 공백으로 구분된 목록에서 속성 값을 일치시키거나 tel: 문자열로 시작하는 속성 값을 일치시킬 수 있습니다. en-US와 같이 하이픈으로 연결된 속성 값을 일치시킬 수도 있습니다. 하이픈 일치와 공백으로 구분된 속성 값 목록 일치는 CSS2 초기에 정의되었습니다.

CSS3의 향상된 점은 부분 일치 규칙이 추가되었다는 것입니다. 이 문서에서는 새로 도입된 속성 선택기(속성 선택기)의 사용에 중점을 둘 것입니다.

1. 부분 일치

전체 속성 값을 사용하여 일치시키는 것은 매우 일반적인 방법이지만 CSS3에서는 부분 일치를 사용할 수 있습니다. 구문 형식은 다음과 같습니다.

[att~=val]

여기서 att는 속성을 나타냅니다. val 공백으로 구분된 속성 값 목록의 값을 나타냅니다. 물결표 ~는 부분 일치의 의미를 나타냅니다.

예:

ikinsoft

2. 하위 문자열 일치

하위 문자열도 전달할 수 있습니다.

정규 표현식과 다소 유사한 속성 값 일치:

^= : 머리부터 일치

$= : 꼬리부터 일치

*= : 특정 하위 문자열 포함

예를 들어, 다음 html 코드:

ikinsoft 온라인 지원팀에 전화

이 사례를 읽으신 후 방법을 익히셨으리라 생각합니다. 더 흥미로운 콘텐츠를 보려면 다른 콘텐츠에 주목하세요. php 중국어 웹사이트 관련 기사!

관련 읽기:

CSS3 번역 속성에 대한 자세한 소개

CSS3에서 회전 후광 효과를 구현하는 단계

CSS3 원형 스타일 탐색경로 코드를 구현하는 단계

위 내용은 CSS3 속성 선택기를 사용하여 JS 역할을 대체하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!