부모 / 조상 요소에 대한 CSS 부정 의사 클래스 : not ()
이것은 나를 미치게 만든다.
HTML :
<div><h1>Hello World!</h1></div>
CSS :
*:not(div) h1 { color: #900; }
이것은 " h1요소가 아닌 조상이있는 모든 요소를 선택하십시오 div...?"라고 읽지 않습니까? 따라서 "Hello World!" 빨간색이되어서는 안되지만 여전히 그렇습니다.
위 마크 업의 경우 자식 결합자를 추가하면 작동합니다.
*:not(div) > h1 { color: #900; }
그러나 h1요소의 자식이 아닌 경우 요소에 영향을주지 않습니다 div. 예를 들면 :
<div><article><h1>Hello World!</h1></article></div>
그래서 h1요소를 하위 요소가 아닌 하위 요소로 지정하고 싶습니다 div. 누군가?
이것은 "
h1요소가 아닌 조상이있는 모든 요소를 선택하십시오div...?"라고 읽지 않습니까?
그렇습니다. 그러나 일반적인 HTML 문서에서 모든 항목 h1 에는 div요소 가 아닌 두 개 이상의 조상이 있으며 이러한 조상은 다름 아닌 body및 html입니다.
이것은 다음을 사용하여 조상을 필터링하려고 할 때의 문제입니다 :not(). 특히 :not()유형 선택기 또는 클래스 선택기와 같은 다른 선택기에 의해 자격이 부여되지 않을 때 안정적으로 작동하지 않습니다 .foo:not(div). 모든 h1요소에 스타일을 적용 하고 div h1.
에서는 선택기 (4) , :not()전체 착체 선택기 자손 연결자 포함 연결자를 포함 허용하도록 향상되었다. 이것은 빠른 프로필에 구현 (및 CSS)할지 여부를 테스트하고 확인 남아 있지만,이 구현되면, 당신은 것입니다 특정 조상을 가진 요소를 제외하는 데 사용할 수 있습니다. 선택기가 작동하는 방식으로 인해 안정적으로 작동하려면 상위 요소가 아닌 요소 자체에서 부정을 수행해야하므로 구문이 약간 다르게 보입니다.
h1:not(div h1) { color: #900; }
jQuery에 익숙한 사람이라면 누구나이 선택기가 오늘날 jQuery에서 작동 한다는 것을 빠르게 지적 할 것 입니다 . 이것은 Selector 3 :not()과 jQuery 사이의 여러 불일치:not() 중 하나이며 Selector 4가 수정하려고합니다.
<html>요소는 아니다 <div>. <body>요소는 아니다 <div>.
따라서 "가 아닌 조상이 있습니다"라는 조건 <div>은 모든 요소에 대해 참이됩니다.
>(자식) 선택기를 사용할 수 없다면 , 나는 당신이하려는 일을 할 수 있다고 생각하지 않습니다. 정말 말이되지 않습니다. 두 번째 예 <article>에서은 div가 아니므로 일치 *:not(div)합니다.
'code' 카테고리의 다른 글
| SQL Server에서 외래 키가 자동으로 인덱싱됩니까? (0) | 2020.11.21 |
|---|---|
| PowerShell에서 $ Error를 지우는 방법은 무엇입니까? (0) | 2020.11.21 |
| PHP에서 system (), exec () 및 shell_exec ()의 차이점은 무엇입니까? (0) | 2020.11.21 |
| .sig 파일로 다운로드 한 파일을 확인하는 방법은 무엇입니까? (0) | 2020.11.21 |
| pgsql 포트 변경 (0) | 2020.11.20 |