하위 요소에 CSS 스타일 적용
특정 클래스가 있는 DIV 내부의 테이블에만 스타일을 적용하려고 합니다.
참고: 저는 차라리 어린이 요소를 위한 css-selector를 사용하고 싶습니다.
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;}모두에게 규칙 적용tha에 포함된 요소div클래스 이름이 지정된 요소test모든 것에 더하여 td요소와 모든 것 caption요소들.
그것은 "모두"와 같지 않습니다.td,th그리고.captiona에 포함된 요소div클래스가 있는 요소test선택기를 변경해야 합니다.
'>일부 이전 브라우저에서는 완전히 지원되지 않습니다(Internet Explorer).
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
아이 태그가 디브 안에 있습니다. 부모님처럼.<a>,<input>,<label>기타.
코드:div.parent * {color: #045123!important;}
중요 항목을 제거할 수도 있습니다. 중요 항목은 필수 항목이 않습니다.
이 코드는 SCSS 구문을 사용하여 트릭도 수행할 수 있습니다.
.parent {
& > * {
margin-right: 15px;
&:last-child {
margin-right: 0;
}
}
}
여기 제가 최근에 작성한 코드가 있습니다.수업을 결합하는 것에 대한 기본적인 설명을 제공한다고 생각합니다.유사 클래스가 있는 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아닐 수도 있음div내부 테이블에만 영향을 줍니다.yourclass그리고, 켄이 말했듯이, >는 모든 곳에서 지원되지 않습니다.div[class=yourclass]클래스에는 점 표기법을 사용합니다.)
언급URL : https://stackoverflow.com/questions/632100/apply-css-style-to-child-elements
'IT' 카테고리의 다른 글
| jQuery Ajax를 사용하여 MVC 컨트롤러 메서드에 개체 목록 전달 (0) | 2023.08.11 |
|---|---|
| 문자열은 어떻게 연결될 수 있습니까? (0) | 2023.08.11 |
| SQL Server 2012 스키마의 모든 테이블 이름 나열 (0) | 2023.08.06 |
| Linux에서 Microsoft SQL Server에 액세스하는 방법에는 어떤 것이 있습니까? (0) | 2023.08.06 |
| powershell을 사용하여 경로에서 최근에 만든 폴더 가져오기 (0) | 2023.08.06 |