如何在 CSS 中检查条件？答案

【问题标题】：How to check conditional in CSS?如何在 CSS 中检查条件？
【发布时间】：2017-05-05 14:05:10
【问题描述】：

我在使用主滑块时遇到问题。

它会自动生成很多类。

就我而言，我将视频和图片加载到幻灯片中。

在我检查的代码中：

<?php if($item->type == 1): ?>   <!-- is Video -->
    <img class="ms-thumb video_slider" ... />
?>
<?php if($item->type == 2): ?>   <!-- is Picture -->
    <img class="ms-thumb picture_slider" ... />
    <div class="picturediv"></div> <!-- I tried to add manual element like that to assign instead of using: `ms-thumb-ol` but it auto remove when slide is generate -->
?>

会生成这样的结构：

            div.ms-thumb-frame
                div.ms-thumb video_slider 
                div.ms-thumb-ol

            div.ms-thumb-frame
                div.ms-thumb picture_slider 
                div.ms-thumb-ol

我想用代码添加一个按钮播放：

div.ms-thumb-frame {
    position: relative;
}
div.ms-thumb-frame div.ms-thumb-ol {
    position: absolute;
    display: block;
    background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
    height: 55px;
    width: 57px;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
div.ms-thumb-frame div.ms-thumb-ol:hover {
    background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}

你可以看到，我只设置元素ms-thumb-ol。

这个元素在另一个元素中是相同的。

有什么方法可以同时签入div.ms-thumb picture_slider和div.ms-thumb-ol

【问题讨论】：

如果你想在css中应用条件，可以使用Sass。
您的意思是使用 JavaScript 或 CSS 或 PHP？ “div.ms-thumb picture_slider 和 div.ms-thumb-ol 并发” 你的意思是要检查 ..ol 何时出现在 ..slider 之后？
这可以通过 CSS 单独使用兄弟+ 组合器来完成。检查我的答案。

标签： javascript php jquery css masterslider

【解决方案1】：

如果您只想编辑 ms-thumb-ol，您可以使用 css 兄弟组合器，因为它位于 div.ms-thumb picture_slider 旁边。因此，要修改它，请为您的 css 添加此选择器：

div.ms-thumb picture_slider + ms-thumb-ol{
//Whatever code you want that specific button to have but not the other button
}

+ 组合器的作用是检查div.ms-thumb picture_slider 类是否后跟ms-thumb-ol。如果是，则应用样式。

编辑：

为了更简单，请将您的代码从现有的代码更改为：

div.ms-thumb-frame + div.ms-thumb-ol {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
}


div.ms-thumb-frame + div.ms-thumb-ol:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play-    button-crm-homepage-11.png);
}

只要按照您在问题中显示的方式设置 HTML，它就可以工作。

请注意，唯一的区别是兄弟组合 +。

【讨论】：

我使用的是运算符+，但我不知道只将样式应用于ms-thumb-ol。你提到you can use the css sibling selector。你可以分享例子吗？谢谢。
代码在我的答案@vanloc 中。组合符*（不是选择器，将修复错字）是 + 号。按照我在答案中的说明使用，它应该对您有用（只要您的 html 与您在问题中提出的相同）。
感谢@Obed Marquez Parlapiano。

【解决方案2】：

如果您只想设置紧跟在div.ms-thumb-frame 内的div.ms-thumb.picture_slider 元素之后的div.ms-thumb-ol，您可以像这样使用CSS Adjacent sibling combinator：

div.ms-thumb-frame div.ms-thumb.picture_slider + div.ms-thumb-ol {
    /* ... */
}

【讨论】：

【解决方案3】：

如果您只有两种类型的项目...使用像这样的三元运算符

$class= ($item->type == 1)?'ms-thumb video_slider':'ms-thumb picture_slider';

并在img标签中使用$class，如下所示..

<img class="<?php echo $class;?>" ... />

【讨论】：

您的评论只会清理我的代码。这不能解决我的问题。