列表的奇数和偶数边界将无效

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;
}

Answer 2

尝试包含x-post-carousel-item类，如下所示：

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

请注意，无需使用!important。

Answer 3

您正在尝试使用错误的css类。由于.entry-cover是li代码的子代，因此您的CSS无效。使用li标记表示奇数和偶数css。 像这样：

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

Answer 4

将此代码添加到CSS并看到这样的魔法。 it's look like this

.slick-track li:nth-child(odd) article a {
    width: 230px;
    border-radius: 50% !important;
    height: 230px;
    margin: 0 auto;
    border: 3px solid red !important;
    overflow: hidden;
    display: block;
    background-size: cover;
}

.slick-track li:nth-child(even) article a {
    width: 230px;
    border-radius: 50% !important;
    height: 230px;
    margin: 0 auto;
    border: 3px solid green !important;
    overflow: hidden;
    display: block;
    background-size: cover;
}

.h-entry-cover {
    position: absolute;
    top: calc(100% - 6em);
    left: 0;
    right: 0;
    margin: 0;
    padding: 1.5em;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
    -webkit-transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.615s cubic-bezier(0.19, 1, 0.22, 1);
}