“+” (Artı işareti) CSS seçici ne anlama geliyor?

Örneğin:

p + p {
  /* Some declarations */
}

Ne +anlama geldiğini bilmiyorum . Bu ve sadece polmadan bir stil tanımlama arasındaki fark nedir + p?

W3.org'daki bitişik seçicilere bakın .

Bu durumda, seçici, stilin yalnızca doğrudan başka bir paragrafı takip eden paragraflar için geçerli olduğu anlamına gelir.

Düz bir pseçici stili sayfadaki her paragrafa uygular.

Bu yalnızca IE7 veya üzeri sürümlerde çalışır. IE6'da, stil hiçbir öğeye uygulanmaz. Bu >arada kombinator için de geçerli .

Ayrıca Internet Explorer'daki CSS uyumluluğu için Microsoft'a genel bakış konusuna bakın .

Bitişik kardeş seçicidir.

Gönderen Stil Splash blog.

Bir CSS bitişik seçiciyi tanımlamak için artı işareti kullanılır.

h1+p {color:blue;}

Yukarıdaki CSS kodu, herhangi bir h1 başlığından sonraki (içinde değil) ilk paragrafı mavi olarak biçimlendirir.

h1>pbir pöğenin doğrudan (birinci nesil) alt öğesi olan herhangi bir öğeyi seçer h1.

• h1>peşleşmeler <h1> <p></p> </h1>( <p>içeride <h1>)

h1+pbir peleman olarak kardeş olan (dom ile aynı seviyede) olan ilk elemanı seçecektir h1.

• h1+peşleşmeler <h1></h1> <p><p/>( <p>sonraki / sonraki <h1>)

+İşaret araçları, bir "bitişik kardeş" seçeneğini

Örneğin, bu stil ikinciden uygulanacaktır <p>:

p + p {
   font-weight: bold;
} 

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

Misal

Bu JSFiddle'a bakın ve anlayacaksınız: http://jsfiddle.net/7c05m7tv/ (Başka bir JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

Tarayıcı Desteği

Bitişik kardeş seçicileri tüm modern tarayıcılarda desteklenir.

Daha fazla bilgi edin

• 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

"+" bitişik kardeş seçicidir. DOĞRUDAN SONRA herhangi bir p'yi seçecektir (bir kardeş veya çocuk değil, bir kardeş).

+seçici denir Adjacent Sibling Selector.

Örneğin, seçici p + p, pöğelerin hemen ardından gelen pöğeleri seçer

looking outsideHemen takip eden elemanı kontrol eden bir seçici olarak düşünülebilir .

İşleri daha net hale getirmek için örnek bir snippet:

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>

Aynı konudan biri olduğumuz için, başka bir seçici, ~seçici,General Sibling Selector

Örneğin, nerede olduğunu farketmeden takip p ~ pedenlerin tümünü seçer , ancak her ikisinin de aynı ebeveyne sahip olması gerekir.ppp

Aynı biçimlendirme ile nasıl göründüğü aşağıda açıklanmıştır:

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>

pBu örnekte sonuncunun da eşleştiğine dikkat edin .

p'P' öğesinin hemen yanındaki herhangi bir öğeyle eşleşir . Bkz. Http://www.w3.org/TR/CSS2/selector.html

+göreceli seçicilerden birini sunar. Tüm ilgili seçicilerin listesi:

div p- <p>Elemanların içindeki tüm elemanlar <div>seçilir.

div > p- <p>Doğrudan üst öğesi <div>seçilen tüm öğeler . Geriye doğru da çalışır ( p < div)

div + p- Tüm <p>elemanlar <div>eleman seçildikten hemen sonra yerleştirilir .

div ~ p- <p>Bir <div>öğeden önce gelen tüm öğeler seçilir.

Seçiciler hakkında daha fazla bilgiyi buradan kontrol edin .

Sonraki paragrafı seçer ve paragrafın başlangıcını tıpkı Microsoft Word'de olduğu gibi soldan girintiler.

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.

son çıktı şuna benzer

Artı (+) ilk acil elemanı seçecektir. + Seçiciyi kullandığınızda iki parametre vermeniz gerekir. Bu örnekle daha açık olacaktır: burada div ve span parametrelerdir, bu durumda bu durumda yalnızca div stilinden sonraki ilk aralık stilize edilir.

 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>

Yukarıdaki stil yalnızca div'den sonraki ilk açıklığa uygulanacaktır. İkinci açıklığın seçilmeyeceğine dikkat etmek önemlidir.

pHemen bitişik olan her öğeyle eşleştiği anlamına gelir

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