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

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

---

예를 들면 :

p + p {
  /* Some declarations */
}

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

---

이 선택기는 스타일이 다른 단락 바로 다음에 오는 단락에만 적용됨을 의미합니다.
일반 p선택기는 페이지의 모든 단락에 스타일을 적용합니다.

W3.org에서 인접한 선택자를 참조하십시오 .

---

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

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

---

인접 형제 선택자입니다.

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

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

h1+p {color:blue;}

위의 CSS 코드는 h1 제목 (안쪽이 아님) 뒤의 첫 번째 단락을 파란색으로 포맷합니다.

h1>pp요소의 직접 (1 세대) 자식 (내부) 인 모든 요소를 선택합니다 h1.

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

h1+ppdom의 동일한 수준에있는 형제 인 첫 번째 요소를 요소로 선택합니다 h1.

• h1+p일치 <h1></h1> <p><p/>( <p>옆 / 뒤 <h1>)

---

+기호 수단은을 선택adjacent sibling

예:

CSS

p + p
{
   font-weight: bold;
} 

HTML

스타일은 두 번째부터 적용됩니다 <p>

<div>
   <p></p>
   <p></p>
</div>

---

예

이 Fiddle을 보면 영원히 이해할 수있을 것입니다 : http://jsfiddle.net/7c05m7tv/ (또 다른 Fiddle : http://jsfiddle.net/7c05m7tv/70/ )

---

브라우저 지원

인접한 형제 선택기는 Internet Explorer 5.x Macintosh에서 지원됩니다. 또한 Netscape 6 프리뷰 릴리스 1에서 사용 가능한 무수한 모든 플랫폼과 Windows 용 Opera 4 프리뷰 릴리스 3에서도 지원됩니다. Windows 용 IE5 및 Windows 용 Opera 3에서 인접 형제 선택기를 처리 할 때 버그가 있습니다.

알아두면 좋은 정보 : Internet Explorer 7은 요소가 선택기와 일치하는 요소 앞에 동적으로 배치 될 때 스타일을 올바르게 업데이트하지 않습니다. Internet Explorer 8에서 링크를 클릭하여 요소를 동적으로 삽입하면 링크가 포커스를 잃을 때까지 첫 번째 자식 스타일이 적용되지 않습니다.

---

더 알아보기

• 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

---

"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).

---

+ selector is called Adjacent Sibling Selector.

For example, the selector p + p, selects the p elements immediately following the p elements

It can be thought of as a looking outside selector which checks for the immediately following element.

Here is a sample snippet to make things more clear:

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>

Since we are one the same topic, it is worth mentioning another selector, ~ selector, which is General Sibling Selector

For example, p ~ p selects all the p which follows the p doesn't matter where it is, but both p should be having the same parent.

Here is how it looks like with the same markup:

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>

Notice that the last p is also matched in this sample.

---

It would match any element p that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html

---

+ presents one of the relative selectors. List of all relative selectors:

div p - All <p> elements inside <div> elements are selected.

div > p - All <p> elements whose direct parent is <div> are selected. It works backward too (p < div)

div + p - All <p> elements places immediately after <div> element are selected.

div ~ p - All <p> elements that are preceded by a <div> element are selected.

More about selectors check here.

---

It selects the next paragraph and indents the beginning of the paragraph from the left just as you might in Microsoft Word.

---

The Plus (+) will select the first immediate element. When you use + selector you have to give two parameters. This will be more clear by example: here div and span are parameters, so in this case only first span after the div will be styled.

 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>

Above style will only apply to first span after div. It is important to note that second span will not be selected.

---

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.

final output look like this

---

It means it matches to every p element which is immediately adjacent

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

참고URL : https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean