Question

我一直在为一个聊天室制作一些CSS来模糊NSFW图像，直到它们徘徊，我的工作得很好。现在我想扩展它，以便能够有复选框来切换总是显示图像，或完全隐藏它们。我知道我必须要做的CSS，但是我不确定是否有办法通过使用:checked完全选择另一个不是复选框的子元素

例如，在我确定被打破的情况下，无法使用的CSS：

.hide-nsfw:checked {
    img[src$="#nsfw"] {
        filter: unset;
    }
 }

只是为了给出一个虚拟布局，没有任何样式，

<html>
<body>
    <div class="chat-messages">
        <div class="message-id-goeshere">
            <img src="http://someimage.com/image.jpg#nsfw" />
        </div>
    </div>
    <div class="configuration">
        <input type="checkbox" class="hide-nsfw" />
    </div>
</body>

请原谅可怕的语法。我可以在JS中做到这一点，但如果可能的话，我宁愿将它保存在纯CSS中。没有CSS扩展。有没有可能的方法呢？我知道CSS3中没有CSS父选择器，但有没有办法完全选择另一个元素？

Answer 1

在CSS中，您可以控制给定元素的以下兄弟的样式（稍后在同一父元素的源代码中出现的那些）。因此，您需要更改标记以启用样式的仅CSS切换。例如。您可以将复选框放在图像之前，然后从label元素引用它，例如

HTML

...
        <input type="checkbox" class="hide-nsfw" id="hide-nsfw" />
        <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg" />

...
        <label for="hide-nsfw">Toggle Image</label>

CSS

.hide-nsfw {
    position: fixed;
    left: -99px; /* hide from screen, preserve availability for Tab */
}

.hide-nsfw ~ img { visibility: hidden; }
.hide-nsfw:checked ~ img { visibility: visible; }

JSFiddle example

将控制元素保存在同一个容器中之前，你可以在CSS中做更复杂的逻辑，比如in this example。但这种方法仍然比JS方式更有限。

Answer 2

不，不幸的是，您需要一些称为父选择器的东西，而且它们不存在于CSS中

找到包含：复选框的div，
那个div里面的所有图像......

您最简单的选择是让复选框在您关注的最高父级（包含所有图像的内容）上切换一个类

$('#myCheckBox').on('click', function() {
    $('body').toggleClass('hideNSFW');
});

该代码使用的是组合类，因为您没有发布和标记，但您可以从中获取并将其应用于HTML。

是否可以使用CSS的基本逻辑？

2 个答案: