[css] “+”(더하기 부호) CSS 선택기는 무엇을 의미합니까?

Program / 글쓴이

예를 들면 다음과 같습니다.

p + p {
  /* Some declarations */
}

무슨 +뜻 인지 모르겠습니다 . 이것과 차이점 p없이 스타일을 정의하는 것의 차이점은 무엇입니까 + p?

답변

W3.org에서 인접한 셀렉터 를 참조하십시오 .

이 경우 선택기는 스타일이 다른 단락 바로 다음의 단락에만 적용됨을 의미합니다.

일반 p선택기는 스타일을 페이지의 모든 단락에 적용합니다.

이것은 IE7 이상에서만 작동합니다. IE6에서는 스타일이 어떤 요소에도 적용되지 않습니다. 그건 >그렇고, 결합기에도 적용됩니다 .

Internet Explorer의 CSS 호환성에 대한 Microsoft 개요도 참조하십시오 .

답변

인접 형제 선택기입니다.

에서 스타일의 스플래시 블로그.

CSS 인접 선택기를 정의하기 위해 더하기 부호가 사용됩니다.

h1+p {color:blue;}

위의 CSS 코드는 h1 머리글 뒤 (내부 아님)의 첫 번째 단락을 파란색으로 형식화합니다.

h1>p선택 임의 p의 AN 직접 (제 1 세대) 아이 (내부) 소자이다 h1소자.

  • h1>p일치 <h1> <p></p> </h1>( <p>내부 <h1>)

h1+pp요소와 동일한 수준의 돔에서 형제 인 첫 번째 요소를 선택합니다 h1.

  • h1+p일치 <h1></h1> <p><p/>( <p>다음 / 다음 <h1>)

답변

+기호의 의미는 “인접 형제”를 선택

예를 들어이 스타일은 두 번째 스타일에서 적용됩니다 <p>.

p + p {
   font-weight: bold;
} 
<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

스 니펫 확장

예

이 JSFiddle을 참조하면 이해할 수 있습니다. http://jsfiddle.net/7c05m7tv/
(다른 JSFiddle : http://jsfiddle.net/7c05m7tv/70/ )

브라우저 지원

모든 최신 브라우저에서 인접 형제 선택기가 지원됩니다.

더 알아보기

답변

“+”는 인접한 형제 선택기입니다. p를 직접 선택한 후 p를 직접 선택합니다 (자녀 나 부모가 아닌 형제 자매).

답변

+선택기가 호출 Adjacent Sibling Selector됩니다.

예를 들어 selector p + p는 p요소 바로 다음에 p요소를 선택합니다.

looking outside바로 다음 요소를 확인 하는 선택기 로 생각할 수 있습니다 .

다음은 더 명확하게하기위한 샘플 스 니펫입니다. 

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

스 니펫 확장

우리는 동일한 주제이므로 다른 선택기 인 ~선택기를 언급 할 가치 가 있습니다.General Sibling Selector

예를 들어, 뒤에 오는 p ~ p모든 항목을 선택하면 위치는 중요하지 않지만 둘 다 동일한 부모를 가져야합니다.ppp

다음은 동일한 마크 업을 사용하는 모습입니다. 

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}
<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

스 니펫 확장

p이 샘플 에서는 마지막 항목 도 일치합니다.

답변

p요소 ‘p’에 바로 인접한 요소와 일치합니다 . 참조 : http://www.w3.org/TR/CSS2/selector.html

답변

+상대 선택기 중 하나를 제공합니다. 모든 상대 선택기 목록 :

div p– <p>요소 내부의 모든 요소 <div>가 선택됩니다.

div > p– <p>직계 부모가 <div>선택된 모든 요소 . 거꾸로 작동합니다 ( p < div)

div + p– 요소를 선택한 <p>직후 모든 요소가 배치 <div>됩니다.

div ~ p– <p>요소 앞에 오는 모든 요소 <div>가 선택됩니다.

선택기에 대한 자세한 내용은 여기를 참조하십시오 .