ตัวเลือก CSS“ +” (เครื่องหมายบวก) หมายถึงอะไร?

ตัวอย่างเช่น:

p + p {
  /* Some declarations */
}

ฉันไม่รู้ว่า+หมายถึงอะไร ความแตกต่างระหว่างนี้และเพียงแค่การกำหนดรูปแบบสำหรับการpได้โดยไม่ต้อง+ p?

ดูตัวเลือกที่อยู่ติดกันใน W3.org

ในกรณีนี้ตัวเลือกหมายความว่ารูปแบบจะใช้กับย่อหน้าต่อจากย่อหน้าอื่นโดยตรงเท่านั้น

pตัวเลือกธรรมดาจะใช้สไตล์กับทุกย่อหน้าในหน้า

สิ่งนี้จะใช้ได้กับ IE7 ขึ้นไปเท่านั้น ใน IE6 สไตล์จะไม่ถูกนำไปใช้กับองค์ประกอบใด ๆ สิ่งนี้ยังไปสำหรับผู้รวบรวม>ด้วยโดยวิธี

ดูเพิ่มเติมภาพรวมของ Microsoft สำหรับการทำงานร่วมกัน CSS ใน Internet Explorer

มันเป็นตัวเลือกพี่น้องที่อยู่ติดกัน

จากบล็อกของ Splash of Style

ในการกำหนดตัวเลือกที่อยู่ติดกันของ CSS จะใช้เครื่องหมายบวก

h1+p {color:blue;}

โค้ด CSS ด้านบนจะจัดรูปแบบย่อหน้าแรกหลังจาก (ไม่อยู่ภายใน) ส่วนหัว h1 ใด ๆ เป็นสีน้ำเงิน

h1>pเลือกpองค์ประกอบใด ๆที่เป็นลูก (รุ่นแรก) โดยตรง (ภายใน) ของh1องค์ประกอบ

• h1>pการแข่งขัน<h1> <p></p> </h1>( <p>ภายใน<h1>)

h1+pจะเลือกpองค์ประกอบแรกที่เป็นพี่น้อง (ที่ระดับเดียวกันของ dom) เป็นh1องค์ประกอบ

• h1+pการแข่งขัน<h1></h1> <p><p/>( <p>ถัดจาก / หลัง<h1>)

+เข้าสู่ระบบวิธีการเลือก "พี่น้องที่อยู่ติดกัน"

ตัวอย่างเช่นสไตล์นี้จะมีผลตั้งแต่วินาที<p>:

p + p {
   font-weight: bold;
} 

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

ตัวอย่าง

ดู JSFiddle นี้แล้วคุณจะเข้าใจ: http://jsfiddle.net/7c05m7tv/ (อีก JSFiddle: http://jsfiddle.net/7c05m7tv/70/ )

สนับสนุนเบราว์เซอร์

ตัวเลือกพี่น้องที่อยู่ติดกันได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยทั้งหมด

เรียนรู้เพิ่มเติม

• 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

"+" เป็นตัวเลือกพี่น้องที่อยู่ติดกัน มันจะเลือก p ใด ๆ โดยตรงหลังจาก ap (ไม่ใช่เด็กหรือผู้ปกครองแม้ว่าพี่น้อง)

+Adjacent Sibling Selectorตัวเลือกที่เรียกว่า

ตัวอย่างเช่นตัวp + pเลือกเลือกpองค์ประกอบทันทีตามpองค์ประกอบ

มันอาจจะคิดว่าเป็นlooking outsideตัวเลือกที่ตรวจสอบองค์ประกอบต่อไปทันที

นี่คือตัวอย่างข้อมูลเพื่อให้ชัดเจนยิ่งขึ้น:

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>

เนื่องจากเราเป็นหนึ่งในหัวข้อเดียวกันจึงควรพูดถึงตัวเลือกตัวเลือกอื่น~ซึ่งก็คือGeneral Sibling Selector

ตัวอย่างเช่นp ~ pเลือกทั้งหมดpที่ตามมาpไม่สำคัญว่าจะอยู่ที่ไหน แต่ทั้งpคู่ควรมีพาเรนต์เดียวกัน

นี่คือลักษณะที่ปรากฏด้วยมาร์กอัปเดียวกัน:

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>

ขอให้สังเกตว่ามีการpจับคู่สุดท้ายในตัวอย่างนี้

มันจะจับคู่องค์ประกอบใด ๆpที่อยู่ติดกับองค์ประกอบ 'p' ทันที ดู: http://www.w3.org/TR/CSS2/selector.html

+นำเสนอหนึ่งในตัวเลือกที่สัมพันธ์กัน รายการของตัวเลือกที่เกี่ยวข้องทั้งหมด:

div p- เลือก<p>องค์ประกอบทั้งหมดภายใน<div>องค์ประกอบ

div > p- <p>องค์ประกอบทั้งหมดที่มีการ<div>เลือกพาเรนต์โดยตรง มันทำงานย้อนหลังด้วย ( p < div)

div + p- <p>องค์ประกอบทั้งหมดวางทันทีหลังจาก<div>องค์ประกอบถูกเลือก

div ~ p- <p>องค์ประกอบทั้งหมดที่นำหน้าด้วย<div>องค์ประกอบจะถูกเลือก

ตัวเลือกเพิ่มเติมเกี่ยวกับการตรวจสอบที่นี่

มันเลือกย่อหน้าถัดไปและเยื้องจุดเริ่มต้นของย่อหน้าจากด้านซ้ายเช่นเดียวกับที่คุณอาจใน 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.

ผลลัพธ์สุดท้ายมีลักษณะเช่นนี้

เครื่องหมายบวก (+) จะเลือกองค์ประกอบแรกทันที เมื่อคุณใช้ + ตัวเลือกคุณจะต้องให้สองพารามิเตอร์ ซึ่งจะมีความชัดเจนมากขึ้นโดยตัวอย่าง: ที่นี่ div และ span เป็นพารามิเตอร์ดังนั้นในกรณีนี้เฉพาะการขยายครั้งแรกหลังจาก div จะถูกจัดรูปแบบ

 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>

รูปแบบด้านบนจะมีผลเฉพาะในช่วงแรกหลังจาก div มันเป็นสิ่งสำคัญที่จะต้องทราบว่าช่วงที่สองจะไม่ถูกเลือก

มันหมายถึงมันตรงกับทุกpองค์ประกอบที่อยู่ติดกันทันที

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