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

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

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/ )

브라우저 지원

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

더 알아보기

• http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
• http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

"+"는 인접한 형제 선택기입니다. 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>가 선택됩니다.

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

다음 단락을 선택하고 Microsoft Word에서와 같이 왼쪽에서 단락의 시작 부분을 들여 씁니다.

p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

최종 출력은 다음과 같습니다

플러스 (+)는 첫 번째 즉시 요소를 선택합니다. + 선택기를 사용할 때 두 개의 매개 변수를 제공해야합니다. 이것은 div와 span이 매개 변수 이므로이 경우 div가 스타일링 된 후 첫 번째 범위 만 지정됩니다.

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

위 스타일은 div 이후 첫 번째 범위에만 적용됩니다. 두 번째 스팬은 선택되지 않습니다.

이것들은 CSS 표시 사용법을 이해하는 데 도움이됩니다.

https://youtu.be/O-QGGALCqQM

그것은 p바로 인접한 모든 요소 와 일치한다는 것을 의미합니다.

www.snoopcode.com/css/examples/css-adjacent-sibling-selector