Na przykład:
p + p {
/* Some declarations */
}
Nie wiem co to +
znaczy. Jaka jest różnica między tym a definiowaniem stylu p
bez + p
?
css
css-selectors
dzień
źródło
źródło
Odpowiedzi:
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
p
selektor 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 .
źródło
visibility : hidden/visible
zamiastdisplay : none/block
. Zobacz to odniesienie .p > p
oznacza zagnieżdżonyp
, to znaczy taki ,p
który znajduje się bezpośrednio pod innymp
, na przykład<p><p>This paragraph</p></p>
.Jest to sąsiedni selektor rodzeństwa.
Z bloga Splash of Style.
h1>p
wybiera dowolnyp
element, który jest bezpośrednim (pierwszej generacji) dzieckiem (wewnątrz)h1
elementu.h1>p
mecze<h1>
<p></p>
</h1>
(<p>
wewnątrz<h1>
)h1+p
wybierze pierwszyp
element, który jest rodzeństwem (na tym samym poziomie domu) jakoh1
element.h1+p
mecze<h1></h1>
<p><p/>
(<p>
obok / po<h1>
)źródło
plus sign
agreater sign
. Jeśli użyjęh1>p
zamiasth1+p
, to czy da mi to ten sam wynik? Czy mógłbyś wyjaśnić trochę, jak się różnią między nimi?h1>p
wybiera dowolnyp
element, który jest bezpośrednim (pierwszej generacji) dzieckiemh1
elementu.h1+p
wybierze pierwszyp
element, który jest rodzeństwem (na tym samym poziomie domu) jakoh1
element.h1>p
mecze<h1><p><p></h1>
,h1+p
mecze<h1></h1><p><p/>
Te
+
środki znak wybierz „obok rodzeństwa”Na przykład ten styl będzie obowiązywał od drugiego
<p>
: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
źródło
„+” to sąsiedni selektor rodzeństwa. Wybierze dowolne p BEZPOŚREDNIO PO ap (nie dziecko ani rodzic, ale rodzeństwo).
źródło
+
selektor jest nazywanyAdjacent Sibling Selector
.Na przykład, przełącznik
p + p
wybierap
elementy bezpośrednio po tychp
pierwiastkówMoż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ć:
Ponieważ jesteśmy jednym tym samym tematem, warto wspomnieć o innym selektorze, czyli
~
selektorzeGeneral Sibling Selector
Na przykład
p ~ p
wybiera wszystkiep
następujące pop
nie ma znaczenia, gdzie to jest, ale obap
powinny mieć tego samego rodzica.Oto jak to wygląda z tym samym znacznikiem:
Zauważ, że ostatnia
p
jest również dopasowana w tej próbce.źródło
Pasowałby do każdego elementu,
p
który bezpośrednio przylega do elementu „p”. Zobacz: http://www.w3.org/TR/CSS2/selector.htmlźródło
+
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 .
źródło
Wybiera następny akapit i wcina początek akapitu od lewej, tak jak w Microsoft Word.
źródło
końcowy wynik wygląda tak
źródło
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.
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
Oznacza to, że pasuje do każdego
p
elementu, który bezpośrednio sąsiadujewww.snoopcode.com/css/examples/css-adjacent-sibling-selector
źródło