Apa arti dari pemilih CSS “+” (tanda tambah)?


750

Sebagai contoh:

p + p {
  /* Some declarations */
}

Saya tidak tahu apa +artinya. Apa perbedaan antara ini dan hanya mendefinisikan gaya ptanpa + p?


Dalam praktiknya ini sebagian besar berguna untuk menerapkan margin atau padding antara elemen daftar dari jenis yang sama, sehingga tidak ada kasus khusus yang diperlukan untuk elemen pertama atau terakhir.
Christophe Roussy

Jawaban:


749

Lihat pemilih yang berdekatan di W3.org.

Dalam hal ini, pemilih berarti bahwa gaya hanya berlaku untuk paragraf langsung setelah paragraf lain.

pPemilih biasa akan menerapkan gaya ke setiap paragraf di halaman.


Ini hanya akan berfungsi pada IE7 atau lebih tinggi. Di IE6, gaya tidak akan diterapkan ke elemen apa pun. Ini juga berlaku untuk >combinator.

Lihat juga ikhtisar Microsoft untuk kompatibilitas CSS di Internet Explorer .


Saya merasa bermanfaat untuk tidak menutup elemen saat disembunyikan. Oleh karena itu cara yang lebih tepat untuk menyembunyikannya adalah dengan menggunakan visibility : hidden/visiblealih-alih display : none/block. Lihat referensi ini .
KFL

6
apa perbedaan antara p + p dan p> p
Muhammad Rizwan

7
@MuhammadRizwan p > pberarti bersarang p, ei apa saja pyang langsung di bawah yang lain p, seperti <p><p>This paragraph</p></p>.
Pisang

203

Ini pemilih saudara yang berdekatan.

Dari blog Splash of Style.

Untuk menentukan pemilih yang berdekatan dengan CSS, tanda plus digunakan.

h1+p {color:blue;}

Kode CSS di atas akan memformat paragraf pertama setelah (tidak di dalam) setiap judul h1 sebagai biru.

h1>pmemilih pelemen apa saja yang merupakan anak langsung (generasi pertama) dari suatu h1elemen.

  • h1>ppertandingan <h1> <p></p> </h1>( <p>di dalam <h1>)

h1+pakan memilih pelemen pertama yang merupakan saudara kandung (pada tingkat dom yang sama) sebagai h1elemen.

  • h1+pcocok <h1></h1> <p><p/>(di <p>sebelah / setelah <h1>)

3
Saya bingung antara plus signdan greater sign. Jika saya menggunakan h1>psebagai gantinya h1+p, apakah itu memberi saya hasil yang sama? Bisakah Anda menjelaskan sedikit perbedaan di antara mereka?
lvarayut

91
Dalam contoh Anda, h1>ppilih pelemen apa pun yang merupakan anak langsung (generasi pertama) dari suatu h1elemen. h1+pakan memilih pelemen pertama yang merupakan saudara kandung (pada tingkat dom yang sama) sebagai h1elemen. h1>ppertandingan <h1><p><p></h1>, h1+ppertandingan<h1></h1><p><p/>
Matthew Vines

1
@MatthewVines kamu harus menambahkan bahwa h1> p dan h1 + p untuk jawaban Anda
MonsterMMORPG

Jadi pada dasarnya dalam contoh Anda ini akan cocok dengan <p> pertama setelah <h1>, tetapi apakah itu juga cocok dengan <p> yang sama jika itu sebelum <h1>? Atau hanya setelahnya?
Vincent

53

The +berarti tanda pilih "saudara yang berdekatan"

Misalnya, gaya ini akan berlaku mulai dari yang kedua <p>:

p + p {
   font-weight: bold;
} 
<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>


Contoh

Lihat JSFiddle ini dan Anda akan memahaminya: http://jsfiddle.net/7c05m7tv/ (JSFiddle lain: http://jsfiddle.net/7c05m7tv/70/ )


Dukungan Browser

Selektor saudara yang berdekatan didukung di semua browser modern.


Belajarlah lagi


42

"+" adalah pemilih saudara yang berdekatan. Ini akan memilih p APAPUN LANGSUNG SETELAH ap (bukan anak atau orang tua, saudara kandung).


23

+pemilih disebut Adjacent Sibling Selector.

Misalnya, pemilih p + p, memilih pelemen segera setelah pelemen

Ini dapat dianggap sebagai looking outsidepemilih yang memeriksa elemen segera berikut.

Berikut ini cuplikan sampel untuk memperjelas:

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>

Karena kita adalah satu topik yang sama, ada baiknya menyebutkan pemilih lain, ~pemilih, yaituGeneral Sibling Selector

Misalnya, p ~ pmemilih semua pyang mengikuti ptidak masalah di mana itu, tetapi keduanya pharus memiliki orang tua yang sama.

Begini tampilannya dengan markup yang sama:

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>

Perhatikan bahwa yang terakhir pjuga cocok dalam sampel ini.



8

+menyajikan salah satu penyeleksi relatif. Daftar semua penyeleksi relatif:

div p- Semua <p>elemen di dalam <div>elemen dipilih.

div > p- Semua <p>elemen yang induk langsungnya <div>dipilih. Ini bekerja mundur juga ( p < div)

div + p- Semua <p>elemen ditempatkan segera setelah <div>elemen dipilih.

div ~ p- Semua <p>elemen yang didahului oleh <div>elemen dipilih.

Lebih lanjut tentang penyeleksi periksa di sini .


Pemilih terakhir salah. Menurut MDN : Combinator saudara kandung umum (~) memisahkan dua penyeleksi dan mencocokkan elemen kedua hanya jika ia mengikuti elemen pertama (meskipun tidak harus segera), dan keduanya adalah anak-anak dari elemen induk yang sama
Carles Alcolea

2

Itu memilih paragraf berikutnya dan indentasi awal paragraf dari kiri seperti yang Anda lakukan di Microsoft Word.


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.

hasil akhir terlihat seperti ini

masukkan deskripsi gambar di sini


1

Plus (+) akan memilih elemen langsung pertama. Ketika Anda menggunakan + selector, Anda harus memberikan dua parameter. Ini akan lebih jelas dengan contoh: di sini div dan span adalah parameter, jadi dalam hal ini hanya rentang pertama setelah div akan ditata.

 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>

Gaya di atas hanya akan berlaku untuk rentang pertama setelah div. Penting untuk dicatat bahwa rentang kedua tidak akan dipilih.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.