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

750

Na przykład:

p + p {
  /* Some declarations */
}

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

dzień
źródło
W praktyce jest to szczególnie przydatne do zastosowania marginesu lub wypełnienia między elementami listy tego samego rodzaju, dlatego nie jest wymagany specjalny przypadek dla pierwszego lub ostatniego elementu.
Christophe Roussy,

Odpowiedzi:

749

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 .

Thorarin
źródło
Uznałem, że przydatne jest nie zwinięcie elementu, gdy jest ukryty. Dlatego bardziej odpowiednim sposobem ukrycia jest użycie visibility : hidden/visiblezamiast display : none/block. Zobacz to odniesienie .
KFL
6
jaka będzie różnica między p + p i p> p
Muhammad Rizwan
7
@MuhammadRizwan p > poznacza zagnieżdżony p, to znaczy taki , pktóry znajduje się bezpośrednio pod innym p, na przykład <p><p>This paragraph</p></p>.
Banana
203

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>)
Matthew Vines
źródło
3
Jestem zmieszany między plus signa greater sign. Jeśli użyję h1>pzamiast h1+p, to czy da mi to ten sam wynik? Czy mógłbyś wyjaśnić trochę, jak się różnią między nimi?
lvarayut
91
W twoich przykładach h1>pwybiera dowolny pelement, który jest bezpośrednim (pierwszej generacji) dzieckiem h1elementu. h1+pwybierze pierwszy pelement, który jest rodzeństwem (na tym samym poziomie domu) jako h1element. h1>pmecze <h1><p><p></h1>, h1+pmecze<h1></h1><p><p/>
Matthew Vines
1
@MatthewVines powinieneś dodać, że h1> p oraz h1 + p do swojej odpowiedzi
MonsterMMORPG
Zasadniczo w twoim przykładzie będzie pasował do pierwszego <p> po <h1>, ale czy byłby również zgodny z tym samym <p>, jeśli pojawił się przed <h1>? A może dopiero potem?
Vincent
53

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

Cas Bloem
źródło
42

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

Gordon Gustafson
źródło
23

+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.

Lijo Joseph
źródło
8

+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 .

Nesha Zoric
źródło
Ostatni selektor jest w błędzie. Według MDN : Ogólny kombinator rodzeństwa (~) oddziela dwa selektory i dopasowuje drugi element tylko wtedy, gdy podąża za pierwszym elementem (choć niekoniecznie natychmiast), i oba są potomkami tego samego elementu nadrzędnego
Carles Alcolea
2

Wybiera następny akapit i wcina początek akapitu od lewej, tak jak w Microsoft Word.

flo
źródło
2
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

wprowadź opis zdjęcia tutaj

IMRA
źródło
1

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.


źródło