如何在 CSS 中检查条件?

Question

我在使用Master Slider时遇到问题。

它自动生成很多类。

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

在我检查的代码中：

<?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

Answer 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 按照您在问题中显示的方式设置，它就会起作用。

请注意，唯一的区别是同级组合器+。

Answer 2

如果你只想设置div.ms-thumb-ol紧div.ms-thumb.picture_slider元素后面的样式div.ms-thumb-frame你可以像这样使用 CSS 相邻的同级组合器：

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

Answer 3

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

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

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

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