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


106

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

나는 사용할 수있다

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

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

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

작동하지 않습니다.

편집하다

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


2
어떻게 작동하지 않습니까? 이러한 하위 요소의 하위 요소는 해당 하위 요소에 할당 된 대부분의 스타일을 상속 할 가능성이 높습니다.
다윗은 분석 재개 모니카 말한다

검사관과 함께 이것을 디버그하고 그것을 인계하는 규칙이 있는지 확인하십시오
Brewal

답변:


152

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>


4
범용 선택기를 사용하지 마십시오. 렌더링 성능에 큰 영향을 미칩니다.
yesIcan

4
@yesIcan : 알겠습니다 .... 유니버설 선택기를 사용하지 않는 대체 솔루션이 있습니까?
Matthew Nichols

8
범용 선택기의 성능은 최신 브라우저에서 그렇게 나쁘지 않습니다. 여기에 참조가 있습니다. 내 작업 경험은이 저자의 결론을 뒷받침합니다.
나단

-2

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

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

예:

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


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

5
이렇게하면 어떤 이점이 있습니까?
Wilson Biggs

3
@WilsonBiggs- "범용 선택기를 사용하지 않는"잘못된 시도로 보입니다. 그러나 "거의 보편적"이기 때문에 분명히 나쁜 생각이지만 추가 테스트가 필요합니다. 따라서 범용 선택자가 수행하는 모든 작업을 수행 한 다음 추가 작업을 수행해야합니다.
ToolmakerSteve

: not (selector)은 사파리에서만 작동하며 크롬 / 파이어 폭스에서 작동하지 않는 것 같습니다.
gtamborero
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.