css3: không() bộ chọn để kiểm tra lớp học của phụ huynh

Question

Tôi có một danh sách không có thứ tự, sử dụng plugin "tab" của bootstraps. Mã này trông như thế này:

<ul> 
    <li class="active span3"><a href="#ourAgency" data-toggle="tab"><i class="icon-building icon-3x"></i>Our Agency</a></li> 
    <li class="span3"><a href="#studentVisas" data-toggle="tab"><i class="icon-laptop icon-3x"></i>Student Visas</a></li> 
    <li class="span3"><a href="#workVisas" data-toggle="tab"><i class="icon-suitcase icon-3x"></i>Work Visas</a></li> 
    <li class="span3"><a href="#accreditation" data-toggle="tab"><i class="icon-legal icon-3x"></i>Accreditation</a></li> 
</ul> 

Tôi muốn sử dụng CSS3 để thay đổi màu sắc của tất cả các liên kết <a> mà cha mẹ <li> KHÔNG có lớp .active.

Tôi đã thử một cái gì đó như thế này:

a:not(li.active>a){ 
    color:grey; 
} 

nhưng vô ích. Có cách nào để làm điều này hay tôi đang sủa cây sai?

Answer 1

Các bộ kết hợp như >, + và không gian cho hậu duệ không được phép trong phạm vi :not() trong CSS; chúng chỉ được phép như một bộ chọn jQuery. Bạn có thể tìm hiểu thêm trong this other question.

Điều đó nói rằng, bạn có thể sử dụng :not() chỉ riêng trên li và di chuyển phần > a; tuy nhiên điều này sẽ phụ thuộc vào cấu trúc của ul và li của bạn yếu tố:

li:not(.active) > a { 
    color: grey; 
} 

Ví dụ, bạn luôn có thể chuỗi selectors khác, chẳng hạn như .span3 nếu bạn muốn hạn chế nó để a yếu tố với li cha mẹ của lớp đó chỉ :

li.span3:not(.active) > a { 
    color: grey; 
} 

Hãy ghi nhớ, tuy nhiên, bạn chỉ có thể dựa vào việc sử dụng :not() theo cách này nếu bạn có quyền kiểm soát đánh dấu hoặc cấu trúc ít nhất là dự đoán được (ví dụ như bạn biết những gì loại của các yếu tố cha mẹ). Trong trường hợp của bạn chẳng hạn, bạn chỉ đang xem li.span3 > a và chỉ áp dụng kiểu khi li.span3 không có lớp đang hoạt động. Với thông tin này, bạn có thể tạo công cụ chọn như một trong các công cụ trên, trong đó nên hoạt động như mong đợi.