어린이 요소에 CSS 스타일을 적용하십시오

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

  •  08-07-2019
  •  | 
  •  

문제

특정 클래스와 함께 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>

내가 뭘 잘못하고 있죠?

도움이 되었습니까?

해결책

이 코드 "div.test th, td, caption {padding:40px 100px 40px 50px;}"모든 사람에게 규칙을 적용합니다 th a div 클래스 이름이있는 요소 test, 그 외에 모두 td 요소와 모두 caption 집단.

"모두와 동일하지 않습니다 td, th 그리고 caption a div 클래스가있는 요소 test". 달성하려면 선택기를 변경해야합니다.

'>'일부 오래된 브라우저에서 완전히 지원되지 않습니다 (인터넷 익스플로러를보고 있습니다). 

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

다른 팁

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

그만큼 > 선택자 후손이 아닌 직접적인 아이들과 일치합니다.

당신은 원합니다 

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>

모든 어린이에 스타일을 추가하려면 HTML 태그에 대한 사양이 없다면 사용하십시오.

부모 태그 div.parent

Div.parent Like 내부의 자식 태그 <a>, <input>, <label> 등.

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

중요하지 않은 중요성을 제거 할 수도 있습니다

다음은 내가 최근에 쓴 몇 가지 코드입니다. 클래스/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>

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

나를 위해 일합니다.

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

내가 아는 한 :

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

또는 귀하의 경우에도 :

div.yourclass table { your style here; }

(그러나 이것은 요소와 함께 작동합니다 yourclass 그렇지 않을 수도 있습니다 divs) 내부 테이블 만 영향을 미칩니다 yourclass. 그리고 Ken이 말했듯이>는 어디에서나 지원되지 않습니다 (그리고 div[class=yourclass] 또한 클래스에 대한 포인트 표기법을 사용하십시오).

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top