Co oznacza selektor CSS „+” (znak plus)?

Na przykład:

p + p {
  /* Some declarations */
}

Nie wiem co to +znaczy. Jaka jest różnica między tym a definiowaniem stylu pbez + p?

Zobacz sąsiadujące selektory na W3.org.

W takim przypadku selektor oznacza, że ​​styl ma zastosowanie tylko do akapitów bezpośrednio po innym akapicie.

Zwykły pselektor zastosuje styl do każdego akapitu na stronie.

Działa to tylko na IE7 lub nowszym. W IE6 styl nie będzie stosowany do żadnych elementów. Dotyczy to również> mówiąc, kombinatora.

Zobacz także przegląd Microsoft dotyczący kompatybilności CSS w Internet Explorerze .

Jest to sąsiedni selektor rodzeństwa.

Z bloga Splash of Style.

Aby zdefiniować sąsiadujący selektor CSS, używany jest znak plus.

h1+p {color:blue;}

Powyższy kod CSS sformatuje pierwszy akapit po (nie w środku) nagłówkach h1 jako niebieski.

h1>pwybiera dowolny pelement, który jest bezpośrednim (pierwszej generacji) dzieckiem (wewnątrz) h1elementu.

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

h1+pwybierze pierwszy pelement, który jest rodzeństwem (na tym samym poziomie domu) jako h1element.

• h1+pmecze <h1></h1> <p><p/>( <p>obok / po <h1>)

Te +środki znak wybierz „obok rodzeństwa”

Na przykład ten styl będzie obowiązywał od drugiego <p>:

p + p {
   font-weight: bold;
} 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

Przykład

Zobacz ten JSFiddle, a zrozumiesz go: http://jsfiddle.net/7c05m7tv/ (Kolejny JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Obsługa przeglądarki

Sąsiednie selektory rodzeństwa są obsługiwane we wszystkich nowoczesnych przeglądarkach.

Ucz 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

„+” to sąsiedni selektor rodzeństwa. Wybierze dowolne p BEZPOŚREDNIO PO ap (nie dziecko ani rodzic, ale rodzeństwo).

+selektor jest nazywany Adjacent Sibling Selector.

Na przykład, przełącznik p + pwybiera pelementy bezpośrednio po tych ppierwiastków

Można to uznać za looking outside selektor, który sprawdza element następujący bezpośrednio po nim.

Oto przykładowy fragment, aby wyjaśnić:

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 tym samym tematem, warto wspomnieć o innym selektorze, czyli ~selektorzeGeneral Sibling Selector

Na przykład p ~ pwybiera wszystkie pnastępujące pop nie ma znaczenia, gdzie to jest, ale oba ppowinny mieć tego samego rodzica.

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 pjest również dopasowana w tej próbce.

Pasowałby do każdego elementu, pktóry bezpośrednio przylega do elementu „p”. Zobacz: http://www.w3.org/TR/CSS2/selector.html

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

div p- Wszystkie <p>elementy wewnątrz <div>elementów są wybrane.

div > p- Wszystkie <p>elementy, których bezpośredni rodzic jest <div>wybrany. Działa również wstecz ( p < div)

div + p- Wszystkie <p>elementy są umieszczane bezpośrednio po <div>wybraniu elementu.

div ~ p- Wszystkie <p>elementy poprzedzone znakiem<div> Zaznaczone są elementem.

Więcej informacji o selektorach znajdziesz tutaj .

Wybiera następny akapit i wcina początek akapitu od lewej, tak jak w 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.

końcowy wynik wygląda tak

Plus (+) wybierze pierwszy natychmiastowy element. Kiedy używasz selektora +, musisz podać dwa parametry. Będzie to bardziej zrozumiałe na przykładzie: tutaj div i span są parametrami, więc w tym przypadku tylko pierwszy rozpiętość 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 stosowany tylko do pierwszego zakresu po div. Należy zauważyć, że drugi zakres nie zostanie wybrany.

Oznacza to, że pasuje do każdego pelementu, który bezpośrednio sąsiaduje

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