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

"+" (+ 기호) 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의 직접적인 (1세대) 자식인 요소h1원소의

• h1>p성냥<h1> <p></p> </h1>(<p>안에서.<h1>)

h1+p첫 번째 항목을 선택합니다.p(돔의 동일한 수준에서) 형제인 요소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>

---

예

이 JSFidle을 보면 이해할 수 있습니다. http://jsfiddle.net/7c05m7tv/ (다른 JSFidle: 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바로 뒤에 있는 요소p

바로 다음 요소를 확인하는 "옆으로 보기" 조합으로 생각할 수 있습니다.

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

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다음에 오는.p, 둘 다.p동일한 부모를 가져야 합니다.

다음은 동일한 마크업을 사용한 결과입니다.

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이 샘플에서도 일치합니다.

그+selector는 다음의 하나의 요소를 대상으로 합니다. 비한맥락서에슷,서에▁the▁on,~선택기는 이후의 모든 요소를 대상으로 합니다.혼란스러운 경우 다음과 같은 다이어그램이 있습니다.

+상대 선택기 중 하나를 나타냅니다.다음은 모든 상대 선택기 목록입니다.

div p 두<p>부요소 안의 <div>요소가 선택되었습니다.

div > p 두<p>가 접모체되요인 <div>선택되었습니다. 작동하기도합니다.p < div)

div + p 두<p>로바뒤배요소 바로 <div>요소가 선택되었습니다.

div ~ p 두<p>음에나요소가 <div>요소가 선택되었습니다.

다음은 실렉터에 대한 몇 가지 더 있습니다.

은 모든 할 것입니다.p그것은 요소 'p'에 바로 인접해 있습니다.참조: http://www.w3.org/TR/CSS2/selector.html

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.

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

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