Làm thế nào để có được màu sắc/thậm chí màu cho IE và Firefox bằng cách sử dụng CSS một mình?

Question

Tôi sử dụng php cho dự án web của mình, nhưng tôi cần bổ sung màu này với CSS một mình.

Vì vậy, tôi cần mã hoạt động trong Firefox và trình khám phá internet.

Mã này được viết, nhưng không hoạt động trong internet explorer:

.tbl_css col:nth-child(odd){  
} 

.tbl_css col:nth-child(even){  
} 

Answer 1

Phiên bản thấp hơn của IE sẽ không hỗ trợ lựa chọn giả.

Bạn có thể sử dụng jQuery để làm cho nó hoạt:

$(document).ready(function(){ 
    $('table tr:even').addClass('even'); 
    $('table tr:odd').addClass('odd'); 
}); 

Trong CSS đơn giản:

.even{ /* your styles */ } 
.odd { /* your styles */ } 

Answer 2

Phiên bản nào của IE được bạn thử nghiệm với?

Bộ chọn nth-child chỉ được thêm vào IE trong IE9. Phiên bản trước (IE8 trở về trước) không hỗ trợ nó.

Nếu bạn cần đạt được hiệu ứng này trong các phiên bản cũ hơn của IE, thì bạn sẽ cần phải sử dụng một kỹ thuật thay thế. Phổ biến nhất là chỉ cần xuất HTML của bạn với các lớp xen kẽ trong các phần tử <tr>. Ngoài ra còn có các plugin JQuery có thể đạt được hiệu ứng này cho bạn.

Hy vọng điều đó sẽ hữu ích.

Answer 3

Bộ chọn giả :nth-child được hỗ trợ bởi phiên bản mới nhất của tất cả các trình duyệt chính (IE 9+, FF 3.5+). Nếu bạn phải hỗ trợ các trình duyệt cũ (IE 8-, ví dụ), bạn có thể tự gán class="odd", class="even" các cột của bạn, hoặc sử dụng JQuery:

$(".tbl_css col:nth-child(2n+1)").addClass("odd"); 
$(".tbl_css col:nth-child(2n)").addClass("even"); 

Đổi tên .tbl_css col:nth-child(odd)-.odd.
Đổi tên .tbl_css col:nth-child(even) thành .even.