CSS : 특정 클래스 내에없는 모든 유형의 요소를 선택할 수 있습니까?
-
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;}
제휴하지 않습니다 StackOverflow