자식 요소에 CSS 스타일 적용

232

특정 클래스가있는 DIV 내부의 테이블에만 스타일을 적용하고 싶습니다.

참고 : 차일드 요소에 CSS 선택기를 사용하고 싶습니다.

# 1이 작동하는 이유와 # 2가 작동하지 않는 이유는 무엇입니까?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2 :

div.test th, td, caption {padding:40px 100px 40px 50px;}

HTML :

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

내가 뭘 잘못하고 있죠?

css css-selectors

— 로마 m
소스

IE6 이하에서는>, + 및 [] 선택기를 사용할 수 없습니다.

— Erick

309

이 코드는 " div.test th, td, caption {padding:40px 100px 40px 50px;}"모든 규칙 적용 tha로 포함되는 요소 div라는 이름의 클래스와 요소 test뿐만 아니라, 모든 td 요소와 모든 caption 요소를.

그것과 동일하지 '모두 td, th및 caption요소는 어느로 포함 div하는 클래스 요소 test". 선택기를 변경해야합니다.

' >'은 (는) 일부 이전 브라우저에서 완벽하게 지원되지 않습니다 (Internet Explorer를보고 있습니다).

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— 켄 브라우닝
소스

div.test를 3 번 이상 쓰는 방법이 있습니까?

— roman m

2

@rm 아뇨. 그룹화 유형 '과'더 규칙의 중첩 또는 없습니다

— sblundy

2

@romanm 'div.test'를 3 번 이상 쓰는 방법이 있습니다! CSS 파일을 작성하기 위해 sass 이하의 프레임 워크를 사용하는 것을 고려하십시오! :)

— gillyb

@romanm-*를 사용하여 반복하지 않도록 모든 어린이를 대상으로하거나 모든 직계 어린이에 대해 .class> *를 사용하면 내 대답을 볼 수 있습니다. 어렵지 않습니다.

— Richard Edwards

IE에서 지원되지 않는 것에 대한 힌트는 매우 도움이되었습니다 .iOS에서 DTCoreText에 대한 CSS 작동을 시도했지만 작동하지 않았으며 파서는 IE보다 나쁩니다.

— 사이렌

123

.test * {padding: 40px 100px 40px 50px;}

— 리차드 에드워즈
소스

11

여기서 * .test *는 모든 하위 요소에 대해 가장 구체적인 규칙 이므로 다른 특정 규칙으로 재정의 할 수 없음을 의미합니다 . 즉, 가장 구체적인 규칙 .test *이기 때문에 더 구체적인 CSS 규칙으로 내부에 넣은 모든 것을 재정의 할 수 없습니다 test *.

— vadasambar

81

> 선택은 직접 아이들뿐만 아니라 후손과 일치합니다.

당신이 원하는

div.test th, td, caption {}

또는 더 가능성이

div.test th, div.test td, div.test caption {}

편집하다:

첫 번째는 말합니다

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

두 번째는 말합니다

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

원본에서는 div.test > th라고 말하지만 any <th> which is a **direct** child of <div class="test">일치 <div class="test"><th>this</th></div>하지만 일치 하지는 않습니다.<div class="test"><table><th>this</th></table></div>

— 그렉
소스

해당 선택기의 td 및 캡션이 "dumb"이므로 div.test와 상관없이 주어진 th / 캡션과 일치합니다. 이런 종류의 블라인드 타겟팅은 CSS에서 가장 일반적인 스타일 이외의 것을 원하는 경우는 거의 없습니다.

— annakata

@ annakata : 그것은 CSS 프레임 워크의 일부입니다, 나는 그것을 로컬로 적용하려고합니다

— 로마 m

10

모든 자식에 스타일을 추가하고 html 태그에 대한 사양을 추가하지 않으려면 사용하십시오.

부모 태그 div.parent

같은 div.parent 내 자식 태그 <a>, <input>, <label>등

코드 : div.parent * {color: #045123!important;}

필요하지 않은 중요한 것을 제거 할 수도 있습니다.

— 사용자 1369111
소스

7

최근에 작성한 코드가 있습니다. 클래스 / ID 이름과 의사 클래스를 결합하는 기본 설명을 제공한다고 생각합니다.

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

스 니펫 확장

— 표
소스

CSS는와 같은 한 줄 주석을 허용하지 않습니다 //. 참조 stackoverflow.com/questions/4656546/...

— 폴커 E.

4

div.test td, div.test caption, div.test th

나를 위해 작동합니다.

자식 선택기>는 IE6에서 작동하지 않습니다.

— Traingamer
소스

2

내가 아는 한

div[class=yourclass] table {  your style here; }

또는 귀하의 경우에도 이것 :

div.yourclass table { your style here; }

(그러나 이것은 yourclass그렇지 않은 요소에 대해서는 작동합니다 div) 내부 테이블에만 영향을 미칩니다 yourclass. 그리고 Ken이 말한 것처럼>는 모든 곳에서 지원되지 않으며 div[class=yourclass]클래스에도 포인트 표기법을 사용하십시오.

— 툰 누즈
소스

0

이 코드는 SCSS 구문을 사용하여 트릭을 수행 할 수 있습니다

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— 그레 긴 토우
소스