Làm cách nào để chọn mọi phần tử lớp div khác chỉ sử dụng CSS (không có js)

Cảm ơn bạn đã trả lời trước.Làm cách nào để chọn mọi phần tử lớp div khác chỉ sử dụng CSS (không có js)

Tôi biết cách thực hiện điều này bằng javascript và php, nhưng tôi đang cố gắng tìm hiểu cách/nếu có thể thực hiện việc này bằng cách sử dụng chỉ css.

Tôi có một vùng chứa chứa nhiều mục. Mỗi mục có một hình ảnh, và bên dưới nó, một div chứa một mô tả. Tôi muốn nền của mô tả khác nhau cho mọi mục khác.

Có thể đạt được điều này chỉ bằng css không? Nếu vậy, làm thế nào? Tôi đã lừa xung quanh bằng cách sử dụng các bộ chọn

.item:nth-child(odd){background-color:red} 
.item .description:nth-of-type(odd){background-color:orange;}

Tôi dường như không hiểu. Gợi ý, ý kiến, bất cứ điều gì được đánh giá cao. Cảm ơn một lần nữa bạn bè. Dưới đây là một số mã mẫu đơn giản thể hiện những gì tôi đang diễn ra.

<style> 
#container{width:100% height:100%;} 
.item {float:left; width:250px; height:700px;} 
.item img {width:250px; height:250px; float:left;} 
.description {width:250px; height:450px; float:left; background-color:blue;} 
.description:nth-of-type(even){background-color:red;}  // <- Here's the line!! 
</style> 

<html> 
<body> 
    <div id="container"> 
    <div class="item">  //item 1 
    <img src="image.jpg"/> 
    <div class="description"> //This (and every odd number) I want to be blue 
    <h1>Title</h1> 
    <h2>Sub Title</h2> 
    <p>Lorem Ipsum dolor sit for Adun!</p> 
    <a href="#">::LEARN MORE::</a> 
    </div> 
    </div> 
    <div class="item">  //item 2 and so on... 
    <img src="image.jpg"/> 
    <div class="description"> //and this (and every even number, red) 
    <h1>Title</h1> 
    <h2>Sub Title</h2> 
    <p>Lorem Ipsum dolor sit for Adun!</p> 
    <a href="#">::LEARN MORE::</a> 
    </div> 
    </div> 
    </div> 
<body> 
</html>

Nguồn

2013-02-20 Jaime

Bạn muốn nth-child() trên .item.

.item:nth-child(odd) .description { 
    background-color: red; 
}

Demo:

Nguồn

2013-02-20 18:08:18 ThinkingStiff

Cảm ơn bạn rất nhiều! :) Mèo tuyệt vời, haha – Jaime

Điều này không hoạt động. Bạn không thể chọn nth-child theo lớp, chỉ theo loại phần tử. Nếu bạn thêm một div khác với một class khác thì tỷ lệ cược và evens sẽ thay đổi. –

Tôi đồng ý với @WalturBuerk. Tôi đã thử điều này và đã lúng túng ở kết quả không nhất quán chỉ để nhận ra đôi khi tôi có một anh chị em với một lớp khác nhau được tính trong bộ chọn giả này. Rất tiếc. –

.item:nth-child(even) {...} 
.item:nth-child(odd) {...}

demo: http://jsfiddle.net/DuL24/1/

Nguồn

2013-02-20 18:09:13

bạn nên đặt thứ n-of-type để .item yếu tố:

0.123.

#container{width:100% height:100%;} 
.item {float:left; width:250px; height:700px;} 
.item img {width:250px; height:250px; float:left;} 
.description {width:250px; height:450px; float:left; background-color:blue;} 
.item:nth-of-type(even) .description {background-color:red;}

Nguồn

2013-02-20 18:13:31 starowere

Có lẽ nó có thể khi chúng ta sử dụng này:

.item:nth-of-type(odd) .description{background-color:orange;}

hoặc

.item:nth-child(odd) .description{background-color:orange;}

Bạn có thể thấy ảnh chụp màn hình của tôi: http://screencast.com/t/17g9joVj8Z
tôi hy vọng bạn sẽ có được những gì bạn cần.

Nguồn

2013-02-20 19:09:43 Sourceforest

Làm cách nào để chọn mọi phần tử lớp div khác chỉ sử dụng CSS (không có js)

Trả lời

Các vấn đề liên quan