chọn CSS cho: cuối cùng con trong một lựa chọn tập hợp con

Question

giả sử tôi có một cấu trúc như thế này (và không thể sửa đổi nó):

<ul> 
    <li class="common"> <p>First A</p> </li> 
    <li class="common"> <p>Second A</p> </li> 
    <li class="common"> <p>Third A</p> </li> 
    <li class="common"> <p><b>SELECT ME</b></p> </li> 
    <li> <p>First B</p> </li> 
    <li> <p>Second B</p> </li> 
    <li> <p>...</p> </li> 
</ul> 

Có cách nào để chọn phần tử cuối cùng với lớp "chung"? (Trong trường hợp này là yếu tố thứ tư)

Đầu tiên tôi đã cố gắng chọn một tập hợp con với:

.common{ 
    background: red; 
} 

và nó làm việc một cách chính xác. Vì vậy, tôi đã thử chọn con cuối cùng của chúng, với:

.common:last-child{ 
    background: green; 
} 

nhưng không may mắn. tôi cũng muốn tránh thêm một lớp cho phần tử đó.

Jsfiddle

EDIT: i đơn giản hóa các lớp học và selectors trở nên sáng sủa

Answer 1

Có cách nào để chọn phần tử cuối cùng với lớp "thường"?

Không, không phải với bộ chọn CSS mà không sửa đổi HTML.

Answer 2

Bạn có thể sử dụng JavaScript hoặc jQuery

$('custom').prev().css('color', 'red'); 

Answer 3

Nếu bạn không chống lại một con đường JS bạn có thể làm điều này

$('li.common.custom').first().prev('.common').css('background','yellow'); 

Nó tìm phần tử đầu tiên có cả lớp .common và .custom và sau đó chuyển đến phần tử trước. Vì vậy, về mặt kỹ thuật là yếu tố cuối cùng của nó mà chỉ có .common

https://jsfiddle.net/89z20341/

là cấu trúc sẽ ở lại chính xác như bạn đã mã hoá nó? ví dụ: với các thẻ in đậm trên phần tử bạn muốn chọn?

nếu vì vậy bạn có thể chỉ làm điều này

.common p b{ 
background: green; 
display:block; 

}

http://jsfiddle.net/seLm589s/4/

Answer 4

gì về

.common:last-of-type { 
 
    background: green; 
 
}