Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS의 하위 선택기

<시간/>

CSS 요소 선택기는 요소 이름이 두 번째 선택기와 일치하는 첫 번째 요소의 자손을 선택하는 데 사용됩니다.

구문

CSS 자손 선택자의 구문은 다음과 같습니다 -

element element {
   /*declarations*/
}

예시

다음 예는 CSS 자손 선택자를 보여줍니다 -

<!DOCTYPE html>
<html>
<head>
<style>
div {
   float: right;
   margin: 25px;
   padding: 5px;
   width: 80px;
   height: 80px;
   border: solid aqua;
}
div div {
   border-color: blue;
   border-radius: 50%;
}
div div div {
   border-color: orange;
   border-radius: unset;
}
</style>
</head>
<body>
<div>
<div>
<div>
</div>
</div>
</div>
</body>
</html>

출력

이것은 다음 출력을 제공합니다 -

CSS의 하위 선택기

예시

<!DOCTYPE html>
<html>
<head>
<style>
li li {
   background-color: lightsteelblue;
}
</style>
</head>
<body>
<ol>
<li></li>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
<li></li>
</ol>
</body>
</html>

출력

이것은 다음 출력을 제공합니다 -

CSS의 하위 선택기