CSS : 특정 클래스 내에없는 모든 유형의 요소를 선택할 수 있습니까?

StackOverflow https://stackoverflow.com/questions/1009094

  •  06-07-2019
  •  | 
  •  

문제

이 페이지를 얻었다고 가정 해 봅시다 :

<body>
    <h1>Hello!</h1>
    <div class="wrapper">
        <div class="anotherclass">
            <h1>Another heading 1</h1>
        </div>
        <div class="yetanotherclass">
            <h1>Yet another heading 1</h1>
        </div>
    </div>
    <h1>Good bye!</h1>
    <div class="class">
        <h1>Good bye. And this time I mean it.</h1>
    </div>
</body>

그리고 나는 모두를 선택하고 싶습니다 H1 내에없는 요소 wrapper-수업. CSS로 어떻게 할 수 있습니까? 나는 "솔루션"과 같은 것을 원하지 않습니다

body h1, body .class h1 {style definitions}

나는 이것의 종류를 더한 후에 :

h1:not(.wrapper > h1) {style definitions}

이것을 할 방법이 있습니까?

도움이 되었습니까?

해결책

다음과 같은 일을한다면 어떻게해야합니까?

h1 { /* rules for everything without the class */ }
h1.class { /* rules for everything with the class */ }

~ 안에 h1.class 당신은 당신이 당신의 정의 한 모든 것을 무시할 것입니다 h1 규칙.

예는 다음과 같습니다.

<html>
    <head>
        <style type="text/css">
                div { color:#00f; }
                div.foo { color:#f00; }
        </style>
    </head>
    <body>
        <div class="foo">foo</div>
        <div>bar</div>
        <div>baz</div>
    </body>
</html>

이 예에서는 모든 것을 효과적으로 목표로 삼았습니다 divs 그것은 클래스가 없습니다 foo.

다른 팁

CSS와 함께 요구하는 일을 할 수 없습니다. CSS 주변의 전체 아이디어는 캐스케이드이며, 당신이하고 싶은 것은 캐스케이드의 흐름에 반대하는 것입니다.

조조 작업 정기 CSS와의 작업 :

h1 {style definitions}
.wrapper h1 {style definitions}

Universal Selector *를 사용하여 글로벌 스타일을 적용한 다음 중첩 된 범용 선택기를 적용 할 수 있습니다. .wrapper * 원래 적용한 스타일을 취소하려면 원래

* {font-weight:bold; border:thin solid red;}

.wrapper * {font-weight:normal; border: 0px solid white;}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top