Co oznacza selektor CSS " + " (znak plus)?

To sąsiedni selektor rodzeństwa.

Z blog o stylu.

Aby zdefiniować selektor CSS, znak plus jest używany.

h1+p {color:blue;}

Powyższy kod CSS sformatuje pierwszy akapit po (nie wewnątrz) nagłówkach h1 jak niebieski.

h1>p zaznacza dowolny element p, który jest bezpośrednim potomkiem (pierwszej generacji) elementu h1.

• h1>p Mecze <h1> <p></p> </h1> (<p> wewnątrz <h1>)

h1+p wybierze pierwszy p element, który jest rodzeństwem (na tym samym poziomie dom) jako element h1.

• h1+p mecze <h1></h1> <p><p/> (<p> obok / Po <h1>)

Znak + oznacza Zaznaczenie adjacent sibling

Przykład:

CSS

p + p
{
   font-weight: bold;
} 

HTML

Styl będzie stosowany od drugiej <p>

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

Przykład

Zobacz to skrzypce, a zrozumiesz to na zawsze: http://jsfiddle.net/7c05m7tv / (Kolejne Skrzypce: http://jsfiddle.net/7c05m7tv/70/)

Obsługa Przeglądarki

Selektory sąsiadujące są obsługiwane w przeglądarce Internet Explorer 5.x Macintosh. Są one również obsługiwane w wersji Netscape 6 preview release 1 dla wszystkich niezliczonych platform, dla których jest dostępny, oraz w wersji preview release 3 opery 4 Dla Windows. W IE5 Dla Windows i Opera 3 Dla Windows występują błędy w obsłudze selektorów sąsiadujących ze sobą.

dobrze wiedzieć: Program Internet Explorer 7 nie aktualizuje poprawnie stylu, gdy element jest dynamicznie umieszczany przed elementem pasującym do selektora. W Internet Explorer 8, Jeśli element jest wstawiany dynamicznie przez kliknięcie łącza. styl pierwszego potomka nie jest stosowany, dopóki łącze nie utraci ostrości.

Dowiedz się więcej

• 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

" + " jest sąsiadującym selektorem rodzeństwa. Wybierze dowolne p bezpośrednio po p (ale nie dziecko lub rodzic, rodzeństwo).

+ selektor nazywa się Adjacent Sibling Selector.

Na przykład selektor p + p, zaznacza elementy p bezpośrednio po elementach p

Może być traktowany jako selektor looking outside, który sprawdza bezpośrednio następujący element.

Oto przykładowy fragment, aby wszystko było bardziej jasne:

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>

Ponieważ jesteśmy jednym tematem, warto wspomnieć o innym selektorze, ~ selektor, czyli General Sibling Selector

Na przykład, p ~ p wybiera wszystkie p, które następują po p nie ma znaczenia, gdzie są, ale oba p powinny mieć ten sam rodzic.

Oto Jak to wygląda z tym samym znacznikiem:

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>

Zauważ, że ostatnia p jest również dopasowana w tej próbce.

Pasuje do dowolnego elementu p, który bezpośrednio przylega do elementu "p". Zobacz: http://www.w3.org/TR/CSS2/selector.html

Wybiera następny akapit i wcięcia początek akapitu z lewej strony, tak jak w programie Microsoft Word.

+ przedstawia jeden ze względnych selektorów. Lista wszystkich względnych selektorów:

div p - wszystkie <p> elementy wewnątrz <div> elementy są zaznaczone.

div > p - wybierane są wszystkie elementy <p>, których bezpośrednim rodzicem jest <div>. Działa też wstecz (p < div)

div + p - wszystkie elementy <p> umieszczone bezpośrednio po elemencie <div> są zaznaczone.

div ~ p - zaznaczone są wszystkie elementy <p> poprzedzone elementem <div>.

Więcej o selektorach sprawdź tutaj .

Plus ( + ) wybierze pierwszy natychmiastowy element. Używając selektora + musisz podać dwa parametry. Będzie to bardziej jasne na przykładzie: tutaj Div I span są parametrami, więc w tym przypadku tylko pierwszy span po div będzie stylizowany.

 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>

Powyższy styl będzie miał zastosowanie tylko do pierwszego zakresu po div. Ważne jest, aby pamiętać, że drugi zakres nie zostanie wybrany.

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.

Końcowe wyjście wygląda tak

Oznacza to, że dopasowuje się do każdego p elementu, który jest bezpośrednio sąsiadujący

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