키 테이크 아웃
CSS 의사 클래스 선택기 : is (), : 여기서 () 및 : ()는 HTML 요소를 대상으로하는 새로운 방법을 제공합니다. : is () 선택기는 여러 요소의보다 효율적인 스타일을 허용하여 장황한 선택기 문자열의 필요성을 줄입니다. : 여기서 () 선택기는 다음과 유사하게 작동하지만 IS ()이지만 특이성이 제로이므로 특이성을 증가시키지 않고 기준선 스타일을 적용하는 데 유용합니다. : () 선택기는 다른 세트를 포함하는 요소를 대상으로하며, 부모 요소를 대상으로하는 오랫동안 기다려온 방법을 제공합니다.
the : is () 및 : 여기서 () 의사 클래스 선택기는 모든 현대식 브라우저에서 지원되지만 인터넷 익스플로러에서는 지원되지 않습니다. : () 선택기는 현재 지원이 제한되어 있지만 2023 년에는 광범위하게 사용할 수있을 것으로 예상됩니다.이 선택기를 사용하면 CSS 구문을 단순화하고 CSS 전 처리기의 필요성을 줄일 수 있습니다.
의 특이성 : is () 및 : 여기서 () 선택기가 다릅니다. : is () 선택기는 인수 내에서 가장 구체적인 선택기와 동일한 특이성을 가지며 : 여기서 () 선택기는 특이성이 없습니다. 이것은 특정 스타일을 사용할 수없는 경우 스타일의 기준선을 적용하는 CSS 재설정에 실용적 일 수 있으므로 특이성에 관계없이 CSS 재설정 스타일을 재정의 할 수 있습니다.
CSS 선택기를 사용하면 HTML 문서 내에서 유형, 속성 또는 위치별로 요소를 선택할 수 있습니다. 이 튜토리얼은 세 가지 새로운 옵션을 설명합니다 - : is (), : where () 및 : has ().
선택기는 일반적으로 스타일 시트에서 사용됩니다. 다음 예제는 모든 단락 요소를 찾아서 글꼴 무게를 굵게 변경합니다.
JavaScript의 선택기를 사용하여 DOM 노드를 찾을 수도 있습니다.
document.querySelector ()는 첫 번째 일치하는 html 요소 를 반환합니다
로 반환합니다.
의사 클래스 선택기는 현재 상태에 따라 HTML 요소를 대상으로합니다. 아마도 가장 잘 알려진 것은 다음과 같습니다. 호버는 커서가 요소 위로 움직일 때 스타일을 적용하므로 클릭 가능한 링크와 버튼을 강조하는 데 사용됩니다. 기타 인기있는 옵션은 다음과 같습니다.
<: :> : 방문 : 방문 링크
: 대상 : 문서 url 를 대상으로하는 요소와 일치합니다
: 첫 번째 자녀 : 첫 번째 자식 요소 를 대상으로합니다
: nth-Child : 특정 아동 요소 를 선택합니다
: 빈 : 내용이나 자식 요소가없는 요소와 일치합니다 <span>p {
</span> <span>font-weight: bold;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
: 공백 : 빈 입력 필드 스타일
<:> : enabled : 활성화 된 입력 필드 와 일치합니다
<: :> : 비활성화 : 비활성화 된 입력 필드 와 일치합니다
: 필수 : 필요한 입력 필드를 대상으로합니다
: 유효한 : 유효한 입력 필드 와 일치합니다
: 유효하지 않음 : 유효하지 않은 입력 필드 와 일치합니다
: 재생 : 오디오 또는 비디오 요소를 대상으로합니다
브라우저는 최근에 3 개의 의사 클래스 선택기를 더 받았습니다.
CSS : 의사 클래스 셀렉터 입니다
참고 : 이것은 원래 : matches () 및 : any (), 그러나 : is ()는 CSS 표준이되었습니다.
종종 동일한 스타일을 하나 이상의 요소에 적용해야합니다. 예를 들어, 단락 텍스트는 기본적으로 검은 색이지만 , 또는
이것은 간단한 예이지만 더 정교한 페이지는 더 복잡하고 장악 한 선택기 문자열로 이어질 것입니다. 선택기의 구문 오류는 모든 요소의 스타일을 깨뜨릴 수 있습니다.
SASS 허가 중첩과 같은 CSS 전 처리기 (CSS에도옵니다) :
이는 동일한 CSS 코드를 생성하고 타이핑 노력을 줄이며 오류를 방지 할 수 있습니다. 하지만:
기본 둥지가 도착할 때까지 CSS 빌드 도구가 필요합니다. Sass와 같은 옵션을 사용하고 싶을 수도 있지만 일부 개발 팀에게는 합병증을 일으킬 수 있습니다.
중첩은 다른 문제를 일으킬 수 있습니다. 장악 CSS를 읽고 출력하기가 점점 어려워지는 깊이 중첩 된 셀렉터를 쉽게 구성하기 쉽습니다.
<span>p {
</span> <span>font-weight: bold;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
<span>/* default black */
</span><span>p {
</span> <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span> <span>color: #444;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
, 및
요소에 녹색 텍스트 색상을 적용합니다. 의 첫 번째 자녀 :
다음과 같은 동등한 코드 : IS () 6 개의 CSS 선택기가 필요합니다.
참고 : ()는 ()가 일치 할 수 없음 :: prever and :: pseudo elements 이후이 예제 코드가 실패합니다.
CSS : 여기서 의사 클래스 선택기
: 여기서 () 선택기 구문은 다음과 동일합니다 : is ()는 모든 최신 브라우저 (즉, IE가 아님)에서도 지원됩니다. 종종 스타일이 동일합니다. 예를 들어:
차이는
특이성 <span>article, section, aside {
</span>
<span>p {
</span> <span>color: #444;
</span> <span>}
</span>
<span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
내의 모든 단락 요소는 회색입니다.
<span><span>:is(article, section, aside) p</span> {
</span> <span>color: #444;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span> <span>color: green;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span> <span>color: green;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
요소의 첫 번째 자식이 아닌 한 1EM에서
공급 업체가 성능 문제를 해결했다고 가정하면 다음의 도입은 과거에 JavaScript없이 불가능한 가능성을 허용합니다. 예를 들어, 필요한 내부 필드가 유효하지 않은 경우 외부 양식 의 스타일과 다음 제출 버튼을 설정할 수 있습니다.
<span>p {
</span> <span>font-weight: bold;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
<span>/* default black */
</span><span>p {
</span> <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span> <span>color: #444;
</span><span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
요소를 강조하는 등 디버깅 스타일을 추가 할 수 있습니다.
<span>article, section, aside {
</span>
<span>p {
</span> <span>color: #444;
</span> <span>}
</span>
<span>}
</span> 로그인 후 복사
로그인 후 복사
로그인 후 복사
선택기 요약
: is () 및 : 여기서 () 의사 클래스 선택기는 CSS 구문을 단순화합니다. 중첩 및 CSS 전 처리기가 필요하지 않습니다 (이 도구는 부분, 루프 및 미니 화와 같은 다른 이점을 제공하지만).
: ()는 상당히 혁명적이고 흥미 진진합니다. 학부모 선택은 빠르게 인기를 얻을 것이며, 우리는 어두운 시간을 잊어 버릴 것입니다! 모든 최신 브라우저에서 사용할 수있는 경우 전체를 게시합니다.
Grid 및 Flexbox와 같은 다른 모든 CSS와 함께 CSS Pseudo 클래스 셀렉터를 더 깊이 파고 싶다면 Tiffany Brown의 멋진 책 CSS Master 를 확인하십시오.
CSS에 대한 자주 묻는 질문 (FAQS) : is () 및 : 여기 () 의사 클래스 셀렉터
의 주요 차이점은 다음과 같습니다. 그들의 특이성에 있습니다. : is () 의사 클래스 선택기는 내부에 배치 된 선택기와 동일한 특이성을 갖습니다. 반면에 : Where () 의사 클래스 선택기는 특이성이 없습니다. 즉, 선택기의 전반적인 특이성에 기여하지 않습니다. 이것은 특이성을 증가시키지 않고 요소 그룹에 스타일을 적용하려는 경우에 특히 유용 할 수 있습니다. 내가 사용할 수 있습니까 : is () 및 : where () 모든 CSS 속성을 가진 pseudo class selectors? 예, 당신은 다음을 사용할 수 있습니다 : is () 및 : where () 모든 CSS 속성을 가진 의사 클래스 선택기. 이 의사 클래스 선택기는 특정 CSS 속성과 관련이 없습니다. 특정 조건에 따라 요소를 선택하는 데 사용되며 선택한 요소에 CSS 속성을 적용 할 수 있습니다. : is () 및 : where () 의사 클래스 선택기는 CSS에 비교적 새로운 추가 기능이며 대부분의 현대식 브라우저에서 지원됩니다. 그러나 이전 브라우저 나 일부 버전의 Internet Explorer에서는 지원되지 않을 수 있습니다. 코드 에서이 선택기를 사용하기 전에 사용할 수있는 사이트에서 현재 브라우저 지원을 확인하는 것이 좋습니다. CSS의 is () Pseudo 클래스 선택기를 어떻게 사용할 수 있습니까?
the : is () CSS의 의사 클래스 선택기를 사용하면 여러 선택기를 하나로 그룹화 할 수 있습니다. 예를 들어, H1, H2 및 H3에 대한 3 개의 별도 선택기를 작성하는 대신 : is () 의사 클래스 선택기를 사용하여 함께 그룹화 할 수 있습니다. : is (h1, h2, h3) {color : blue; }. is () 의사 클래스 선택기이지만 특이성이 없습니다. 예를 들어, 특이성을 증가시키지 않고도 특정 클래스의 모든 요소를 선택하는 데 사용할 수 있습니다. }. 여러 조건을 충족하는 요소를 선택할 때 유용 할 수 있습니다. 예를 들어, DIV : IS (H1, H2) {Color : Blue; }. -의사 요소가있는 클래스 선택기. 예를 들어, 다음과 같은 H1 및 H2 요소의 모든 첫 번째 문자를 선택할 수 있습니다. is (h1, h2) :: First-Letter {color : blue; }. 속성 선택기가있는 클래스 선택기. 예를 들어, 다음과 같은 데이터 변호사로 모든 요소를 선택할 수 있습니다. : is ([data-attribute]) {color : blue; }. 클래스 선택기가있는 클래스 선택기. 예를 들어, 다음과 같은 특정 클래스의 모든 요소를 선택할 수 있습니다. : is (.class1, .class2, .class3) {color : blue; }. ID 선택기가있는 클래스 선택기. 예를 들어, 다음과 같은 특정 ID로 모든 요소를 선택할 수 있습니다. : is ( #id1, #id2, #id3) {color : blue; }..
위 내용은 CSS의 방법 : IS, : WHER 및 : 의사 급 선택기가 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
