CSS 인접 형제 선택기를 사용하는 경우-CSS 튜토리얼-php.cn

CSS 인접 형제 선택기를 사용하는 경우

(*-*)浩

풀어 주다： 2019-12-30 16:16:43

원래의

3207명이 탐색했습니다.

CSS 인접 형제 선택기를 사용하는 경우

인접 형제 선택기는 다른 요소 바로 다음에 요소를 선택할 수 있으며 둘 다 동일한 상위 요소# 🎜🎜#를 갖습니다. #🎜🎜 ##### 🎜🎜#인접한 형제 선택(권장 학습:

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개의 목록 항목을 포함하는 순서가 지정된 목록입니다. 두 목록은 목록 항목 자체와 마찬가지로 인접한 형제입니다.

그러나 첫 번째 목록의 목록 항목과 두 번째 목록의 목록 항목은 인접한 형제가 아닙니다. 두 목록 항목 세트가 동일한 상위 요소에 속하지 않기 때문입니다(최대한 사촌으로만 간주됩니다).

결합기로는 인접한 두 형제 중 두 번째 요소만 선택할 수 있다는 점을 기억하세요. 아래 선택기를 살펴보세요.