반응형
우리가 형제라고 부르는 것과 약간의 혼동이 있을 수 있습니다. 그럼, 먼저 그걸 치워버리자. 아래 코드를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sibling combinator</title>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>Lorem ipsum text</p>
<h2>2nd Heading</h2>
<p>Lorem ipsum text</p>
<p>Lorem ipsum text</p>
</div>
</body>
</html>위의 코드에서는:
h2(1번째 제목)에 형제(상위: .div1)가 없습니다.
p, h2(2번째 제목), p 및 p는 형제입니다(상위: .div2)
클래스 div1 및 div2는 형제(상위: 본문)입니다.
형제 조합에는 두 가지 유형이 있습니다.
- 인접 형제 조합자
- 일반 형제 조합자
먼저 인접 형제 조합기를 이해하겠습니다.
MDN은 다음과 같이 말합니다. 인접한 형제 조합자(+)는 두 개의 선택자를 구분하며 첫 번째 요소 바로 뒤에 오는 경우에만 두 번째 요소와 일치하며 둘 다 동일한 상위 요소의 자식입니다.
더 잘 이해하기 위해 그것을 코드화합시다.
예 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sibling combinator</title>
<style>
h2 + p{
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>1st para</p>
<h2>2nd Heading</h2>
<p>2nd para/p>
<p>3rd para</p>
</div>
</body>
</html>위에서 볼 수 있듯이 div2의 두 번째 파라는 두 번째 헤딩을 바로 따라가면서 분홍색으로 변했고 둘 다 남매입니다.
예 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sibling combinator</title>
<style>
p + p{
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>Lorem ipsum text</p>
<p>Lorem ipsum text</p>
<h2>2nd Heading</h2>
</div>
위에서 볼 수 있듯이 div2의 두 번째 파라는 첫 번째 파에 이어 바로 분홍색으로 변했고 둘 다 남매입니다.
예 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sibling combinator</title>
<style>
p + p{
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>1st para</p>
<h2>2nd Heading</h2>
<p>2nd para</p>
<div>
```
당신은 왜 두 번째 단락이 분홍색으로 바뀌지 않는지 추측할 수 있나요?
왜냐하면 div2에서 2행은 1행 바로 뒤에 있지 않기 때문입니다. 그 사이에는 "h2"가 있다.
이제 일반적인 조합기로 넘어갑시다.
MDN은 다음과 같이 말합니다. 일반 형제 조합자(~)는 두 개의 선택자를 분리하고 첫 번째 요소(즉각은 아니지만) 뒤에 오는 두 번째 요소의 모든 반복과 일치하며 동일한 부모 요소의 자식이다.
<div class="content-ad"></div>
예를 들어 이해의 모범 사례를 살펴봅시다.
예 4:
```js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sibling combinator</title>
<style>
p + p{
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<h2>1st Heading</h2>
</div>
<div class="div2">
<p>1st para</p>
<h2>Heading</h2>
<p>2nd para</p>
<h2>Heading</h2>
<p>3rd para</p>
<h2>Heading</h2>
<p>4th para</p>
```
위의 코드에서는 그 사이에 "h2"가 있더라도 상관없다. 첫 번째 단락 뒤에 오는 모든 단락이 분홍색으로 변했어요.
<div class="content-ad"></div>
명백할 수 있지만, 여전히 알아두십시오. 위의 예에서는 요소 이름을 선택기로 사용했지만 모든 선택기(클래스, ID 등)를 사용할 수 있습니다.
그게 다예요, 여러분.
궁금한 점이 있으시면 댓글창에 문의해주시면 최대한 빨리 답변드리도록 하겠습니다.
저는 웹 개발과 관련된 글을 매일 하나씩 씁니다(예, 매일). 같은 걸 배우고 있다면 여기로 따라오세요.
만약 당신이 그 기사를 좋아한다면 트위터에서 나를 팔로우하라: @therajatg
<div class="content-ad"></div>
Linkedin 유형인 경우 https://www.linkedin.com/in/therajatg/에 연결합니다.
의 앞날을 멋지게 보내십시오!
'css' 카테고리의 다른 글
| 하이 드론 (0) | 2022.02.23 |
|---|---|
| 종횡비를 유지하고 화면에 맞는 유체 블록 CSS (0) | 2022.02.23 |
| SVG를 사용한 대화형 지글리퍼프 (0) | 2022.02.23 |
| 보아스 프라티카스 엠 클래스네임 no CSS (0) | 2022.02.22 |
| 퀘 나시오 에스토? (0) | 2022.02.22 |
댓글