[css] 요소의 모든 자식에 스타일을 적용하려면 어떻게합니까

Program / 글쓴이

나는 class='myTestClass'. 이 요소의 모든 자식에 CSS 스타일을 어떻게 적용합니까? 요소 자식에만 스타일을 적용하고 싶습니다. 손녀가 아닙니다.

나는 사용할 수있다

.myTestClass > div {
  margin: 0 20px;
}

모든 div어린이에게 효과가 있지만 모든 어린이에게 효과가있는 솔루션을 원합니다. 사용할 수 있다고 생각 *했지만

.myTestClass > * {
  margin: 0 20px;
}

작동하지 않습니다.

편집하다

.myTestClass > *선택은 파이어 폭스 (26)의 규칙을 적용하지 않으며, 불을 지르고에 따라 마진에 대한 다른 규칙은 없다. 내가 대체한다면 그것은 작동 *으로 div.

답변

David Thomas가 언급했듯이 이러한 하위 요소의 자손은 해당 하위 요소에 할당 된 대부분의 스타일을 상속 할 것입니다.

.myTestClass요소 내부 를 감싸고 .wrapper * 하위 항목 선택기 를 추가하여 스타일을 하위 항목에 적용해야합니다 . 그런 다음 .myTestClass > * 자식 선택기 를 추가하여 자식 요소가 아닌 자식 요소에 스타일을 적용합니다. 예를 들면 다음과 같습니다.

JSFiddle- 데모

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>

스 니펫 확장

답변

*선택기 대신 선택기와 :not(selector)함께를 사용하고 >확실히 어린이가 아닌 것을 설정할 수 있습니다.

편집 : 더 빠를 것이라고 생각했지만 내가 틀렸다는 것이 밝혀졌습니다. 무시.

예:

.container > :not(marquee){
        color:red;
    }


<div class="container">
    <p></p>
    <span></span>
<div>

답변