Bộ chọn cho một thẻ theo sau trực tiếp bởi một thẻ khác

Đây sẽ chọn tất cả <B>các thẻ trực tiếp trước bởi <A>thẻ:

A+B {
    /* styling */
}

Bộ chọn cho tất cả <A>các thẻ theo sau trực tiếp bởi <B>các thẻ là gì?

Đây là HTML mẫu phù hợp với câu hỏi của tôi:

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

Bạn không thể trong css.

Chỉnh sửa: Để hữu ích hơn một chút, nếu bạn sử dụng ví dụ: jQuery (một thư viện JavaScript), bạn có thể sử dụng .prev().

Ý của bạn là định kiểu A cho rằng nó có phần tử B trực tiếp bên trong hoặc theo sau? Như thế này:

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

// OR

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

Bạn không thể làm điều đó trong CSS (chưa). Eric Meyer nói rằng loại bộ chọn này đã được thảo luận khá nhiều lần trong danh sách gửi thư CSS và không thể thực hiện được. Dave Hyatt, một trong những nhà phát triển WebKit cốt lõi, nhận xét với lời giải thích tốt về lý do tại sao nó không thể được thực hiện.

Kiểm tra: Bài đăng trên blog của Shaun Inman và bình luận của Eric Meyer .
David Hyatt cũng cân nhắc .

Bạn CHỈ có thể làm ngược lại: Điều này chọn tất cả các thẻ đứng trước các thẻ.

Điều này về mặt logic tương đương với yêu cầu của bạn.

Tôi thường sử dụng điều này để tạo kiểu cho một hàng nhiều hộp kiểm có nhãn

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>

Mặc dù nó không tiện dụng lắm, nhưng ngày nay bạn có thể đạt được hành vi này bằng cách đảo ngược thứ tự của các phần tử của bạn cả khi bạn tạo HTML và bằng cách áp dụng các quy tắc CSS: display: flexvà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>

Ngoài ra, nếu bạn có 2 hoặc nhiều phần tử nội tuyến, bạn có thể đạt được điều đó bằng cách áp dụng float: right, vì chúng sẽ được hiển thị theo thứ tự ngược lại:

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>