CSS đứa con đầu lòng của lớp học cụ thể

Question

Tôi có mảnh sau của HTML:

<span class="ui-icon ui-icon-triangle-1-s"></span> 
<span class="route-line">4</span> 
<span class="route-line">33</span> 

Tôi muốn thêm một số phong cách trên đầu tiênspan với class="route-line". Có thể với CSS? Nó là một cái gì đó giống như nth-of-type; nếu nó đã tồn tại, nó sẽ được gọi là nth-of-type-with-class.

Cảm ơn bạn!

Answer 1

tuổi đầu tiên với lớp .route-line tiếp cho bất kỳ yếu tố khác mà không có lớp .route-line

*:not(.route-line) + span.route-line 
{ 
    background-color:yellow; 
} 

Answer 2

Tại sao bạn không áp dụng một lớp khác cho phần tử bạn muốn tạo kiểu.

<span class="ui-icon ui-icon-triangle-1-s"></span> 
<span class="route-line custom-route-line">4</span> 
<span class="route-line">33</span> 

Và css sẽ trông như thế này

.custom-route-line{/*your styling goes here*/} 

Lưu ý cả hai phong cách của lớp (đường dòng & tùy chỉnh-route-line) sẽ áp dụng cho phần tử đó. Take a look here

Answer 3

Trong trường hợp này bạn có thể sử dụng bộ chọn anh chị em. Cũng giống như vậy:

.ui-icon + .route-line{ 
    color: red; 
} 

Nó sẽ chỉ tạo kiểu cho span mà sau các phần tử với một lớp ui-icon.

Answer 4

gì bạn đang tìm kiếm là span.route-line:first-of-type, nhưng nó kém được hỗ trợ .