ตัวเลือกสำหรับแท็กหนึ่งตามด้วยแท็กอื่นโดยตรง

ซึ่งจะเลือก<B>แท็กทั้งหมดที่นำหน้าด้วย<A>แท็ก:

A+B {
    /* styling */
}

ตัวเลือกสำหรับ<A>แท็กทั้งหมดตามด้วย<B>แท็กโดยตรงคืออะไร

นี่คือตัวอย่าง HTML ที่เหมาะกับคำถามของฉัน:

<a>some text</a>
<b>some text</b>

คุณไม่สามารถใน css

แก้ไข:จะเป็นบิตที่เป็นประโยชน์มากขึ้นถ้าคุณใช้เช่น jQuery (ห้องสมุดจาวาสคริปต์) .prev()คุณสามารถใช้

คุณหมายถึงสไตล์ A เนื่องจากมีองค์ประกอบ B อยู่ข้างในหรือตามมาโดยตรง? แบบนี้:

<A>
    <B>
    </B>
</A>

// OR

<A>
</A>
<B>
</B>

คุณไม่สามารถทำสิ่งนั้นใน CSS ได้ (ยัง) Eric Meyer กล่าวว่าตัวเลือกประเภทนี้มีการพูดคุยกันหลายครั้งในรายชื่ออีเมล CSS และไม่สามารถทำได้ Dave Hyatt หนึ่งในผู้พัฒนา WebKit หลักแสดงความคิดเห็นพร้อมคำอธิบายที่ดีว่าเหตุใดจึงไม่สามารถทำได้

เช็คเอาต์: โพสต์บล็อก Shaun Inman ของและแสดงความคิดเห็นโดยเอริคเมเยอร์
David Hyatt ก็มีน้ำหนักเช่นกัน

คุณสามารถสนทนาได้เท่านั้น: ซึ่งจะเลือกแท็กทั้งหมดที่นำหน้าด้วยแท็กโดยตรง

สิ่งนี้เทียบเท่ากับคำขอของคุณในเชิงตรรกะ

ฉันมักจะใช้สิ่งนี้เพื่อจัดรูปแบบแถวของช่องทำเครื่องหมายที่มีป้าย

CSS:

label+input {
    margin-left: 4px;
}

DOM:

<input id="a" name="a" type="checkbox"/><label for="a">...</label>
<input id="b" name="b" type="checkbox"/><label for="b">...</label>
<input id="c" name="c" type="checkbox"/><label for="c">...</label>

แม้ว่าจะไม่สะดวกนัก แต่ในปัจจุบันคุณสามารถบรรลุพฤติกรรมนี้ได้โดยการย้อนกลับลำดับขององค์ประกอบของคุณทั้งเมื่อคุณสร้าง HTML และโดยใช้กฎ CSS: display: flexและflex-direction: column-reverse

ul {
  display: flex;
  flex-direction: column-reverse;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>

นอกจากนี้หากคุณมีองค์ประกอบอินไลน์ตั้งแต่ 2 รายการขึ้นไปคุณสามารถบรรลุได้โดยการใช้float: rightเนื่องจากจะแสดงในลำดับย้อนกลับ:

ul {
  float: left;
  list-style-type: none;
}

li {
  float: right;
}

li:not(:first-child) {
  margin-right: 20px;
}

.b ~ .a {
  color: red;
}

<ul>
    <li class="a">A 3</li>
    <li class="c">C 2</li>
    <li class="c">C 1</li>
    <li class="b">B 1</li>
    <li class="a">A 2</li>
    <li class="a">A 1</li>
</ul>