CSS 인접 형제 선택기를 사용하는 경우
- (*-*)浩원래의
- 2019-12-30 16:16:433081검색
인접 형제 선택기는 다른 요소 바로 다음에 요소를 선택할 수 있으며 둘 다 동일한 상위 요소# 🎜🎜#를 갖습니다. #🎜🎜 ##### 🎜🎜#인접한 형제 선택(권장 학습:
css tutorial)🎜🎜# 요소 뒤의 요소에 대해 두 요소 모두 동일한 상위 요소인 경우 인접 형제 선택기를 사용할 수 있습니다. 예를 들어 h1 요소 바로 뒤에 나타나는 단락의 위쪽 여백을 늘리려면 다음과 같이 쓸 수 있습니다.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>#🎜🎜 #이 선택기는 다음과 같이 읽습니다. "h1 요소 바로 뒤에 나타나는 단락을 선택합니다. h1 및 p 요소에는 공통 상위 요소가 있습니다."
문법 설명:
인접 형제 선택자는 더하기 기호(+), 즉 인접 형제 조합자 )를 사용합니다.
참고: 은 하위 조합 기호와 동일하며 인접한 형제 조합 기호 옆에 공백 문자가 있을 수 있습니다.
아래 문서 트리 스니펫을 살펴보세요.<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>위 스니펫에서 div 요소에는 두 개의 목록이 포함되어 있습니다. 하나는 순서가 지정되지 않은 목록이고 다른 하나는 순서가 지정되지 않은 목록입니다. 각각 3개의 목록 항목을 포함하는 순서가 지정된 목록입니다. 두 목록은 목록 항목 자체와 마찬가지로 인접한 형제입니다.
그러나 첫 번째 목록의 목록 항목과 두 번째 목록의 목록 항목은 인접한 형제가 아닙니다. 두 목록 항목 세트가 동일한 상위 요소에 속하지 않기 때문입니다(최대한 사촌으로만 간주됩니다).
결합기로는 인접한 두 형제 중 두 번째 요소만 선택할 수 있다는 점을 기억하세요. 아래 선택기를 살펴보세요.li + li {font-weight:bold;}위 선택기는 목록의 두 번째와 세 번째 목록 항목만 굵게 표시합니다. 첫 번째 목록 항목은 영향을 받지 않습니다.
위 내용은 CSS 인접 형제 선택기를 사용하는 경우의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!