<分区>
标签 html css css-selectors
<分区>
我有这样的 HTML:
<div class="parent">
<div class="thumb">...</div>
<div class="text">...</div>
</div>
我希望“文本”div 的背景为白色。但前提是它前面没有“拇指”div，因为该 div 不会一直存在。
我意识到我可以做这样的事情:
.parent .text {background-color: #fff;}
.parent .thumb + .text {background-color: transparent;}
因此，将所有文本背景涂成白色，然后覆盖前面有缩略图 div 的背景。
但我想知道是否可以做类似的事情:
.parent :not(.thumb +) .text {background-color: white;}
在前面没有“thumb”div 的情况下，通过仅针对“text”div 来一石二鸟。有什么想法吗？
最佳答案
您可以使用 SASS 在 CSS 中使用条件 (if/else) :
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
检查 documentation !
或者，您可以根据需要使用 JavaScript/jQuery 添加/删除类。
标准 CSS 没有实际的 if/else。
关于html - 使用 :not in conjunction with adjacent selectors，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44073281/