(하위) 선택자를 포함합니다.

지정된 태그 요소 아래의 하위 요소를 선택하기 위한 선택기, 즉 공백을 추가하는 기능이 포함되어 있습니다. 예를 들어 오른쪽 코드 편집기의 코드는 다음과 같습니다.

.firstspan{color:red;}

이 코드 줄은 텍스트의 첫 번째 단락을 "cowardly"로 만듭니다. "Rat" 글꼴 색상이 빨간색으로 변경되는 것과 같습니다.

이 선택자와 하위 선택자의 차이점에 유의하세요. 하위 선택자는 직계 자손만 참조하거나 하위 요소에 대해 작동하는 1세대 자손으로 이해하면 됩니다. 자손 선택자는 모든 하위 자손 요소에 작용합니다. 하위 선택자는 공백으로 선택하고 하위 선택자는 ">"로 선택합니다.

요약: > 요소의 1세대 자손에 작용하고 공백은 요소의 모든 자손에 작용합니다.

다음 섹션

새로운 파일

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}

.food>li{
 border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/	
}
</style>
</head>
<body>
 <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<ul class="food">
 <li>水果
 <ul>
 	<li>香蕉</li>
 <li>苹果</li>
 <li>梨</li>
 </ul>
 </li>
 <li>蔬菜
 	<ul>
 	<li>白菜</li>
 <li>油菜</li>
 <li>卷心菜</li>
 </ul>
 </li>
</ul>

</body>
</html>

제출하다 코드 재설정

자동운전

전체 화면