반응형
CSS-ID 내에서 클래스를 선택하는 구문
클래스 이름을 통해 ID 내에서 태그를 선택하는 선택기 구문은 무엇입니까? 예를 들어, 내부 "li"가 빨간색으로 바뀌려면 아래에서 무엇을 선택해야합니까?
<html>
<head>
<style type="text/css">
#navigation li
{
color: green;
}
#navigation li .navigationLevel2
{
color: red;
}
</style>
</head>
<body>
<ul id="navigation">
<li>Level 1 item
<ul class="navigationLevel2">
<li>Level 2 item</li>
</ul>
</li>
</ul>
</body>
</html>
#navigation .navigationLevel2 li
{
color: #f00;
}
이것은 또한 작동하며 추가 수업이 필요하지 않습니다.
#navigation li li {}
세 번째 수준의 LI가있는 경우 위의 선택기에서 상속 할 일부 스타일을 재설정 / 재정의해야 할 수 있습니다. 다음과 같이 세 번째 수준을 타겟팅 할 수 있습니다.
#navigation li li li {}
.navigationLevel2 li { color: #aa0000 }
두 가지 옵션이 있습니다. 결국에는 작업이 적기 때문에 navigationAlt 옵션을 선호합니다.
<html>
<head>
<style type="text/css">
#navigation li {
color: green;
}
#navigation li .navigationLevel2 {
color: red;
}
#navigationAlt {
color: green;
}
#navigationAlt ul {
color: red;
}
</style>
</head>
<body>
<ul id="navigation">
<li>Level 1 item
<ul>
<li class="navigationLevel2">Level 2 item</li>
</ul>
</li>
</ul>
<ul id="navigationAlt">
<li>Level 1 item
<ul>
<li>Level 2 item</li>
</ul>
</li>
</ul>
</body>
</html>참고 URL : https://stackoverflow.com/questions/1140646/css-syntax-to-select-a-class-within-an-id
반응형
'developer tip' 카테고리의 다른 글
| react-router를 사용하여 다른 경로로 리디렉션하는 방법은 무엇입니까? (0) | 2020.11.02 |
|---|---|
| GraphViz에 비해 너무 큰 무 방향 그래프 시각화? (0) | 2020.11.02 |
| Visual Studio를 VB.NET 대신 C # 프로젝트로 기본 설정하는 방법은 무엇입니까? (0) | 2020.11.02 |
| 사용자 이름과 비밀번호를 Python에 안전하게 저장해야합니다. 옵션은 무엇입니까? (0) | 2020.11.02 |
| C #을 사용하여 파일에서 EXIF 데이터를 가져 오는 방법 (0) | 2020.11.02 |