html - 列表的奇数和偶数边界不起作用

Question

我在这里使用主题http://demo.theme.co/ethos-1/

我的目标是让正方形帖子预览变成圆形(成功)，并且每隔一个列表项有一个颜色交替变化的边框。

但由于某些原因，我的奇数和偶数 css 无法正常工作。

我试过更具体地选择我的选择器，但还没有找到一个让它起作用的。

我已经上传了以下相关代码:

    /*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x

*/

.entry-cover {
    border-radius: 100%;
    width: 95%;
}
.entry-cover:nth-child(2n+1) {
   border:5px solid black;
}
.entry-cover:nth-child(2n) {
   border:5px solid red;
}
.x-navbar-wrap {
    margin-top: 3.5%;
}
.slick-list.draggable {
    margin-top: 1%;
}

任何想法将不胜感激？

提前致谢!

Answer 1

此 css 似乎可以正常工作，因为 hsan 提到您的 CSS 选择器不正确。也将使用偶数/奇数

li.x-post-carousel-item:nth-child(even) {
   border:5px solid black;
}
li.x-post-carousel-item:nth-child(odd) {
   border:5px solid red;
}

如果你想要所有东西都用奇怪的边框包围你需要更进一步:

.entry-cover {
  border-radius:100%;
}
.x-post-carousel.unstyled .entry-cover{
  border:none !important;
}
li.x-post-carousel-item {
    border-radius: 95%;
    width: 95%;
}
li.x-post-carousel-item:nth-child(even) {
   border:5px solid black;
}
li.x-post-carousel-item:nth-child(odd) {
   border:5px solid red;
}