Question

让我先说明我不是编码员。我只是这样做，因为它是我需要的功能，所以......这可能是一个非常愚蠢的问题。对不起！

我需要一个简单的，CSS驱动的（jQuery和Javascript不是选项，因为CMS因安全问题而使它们无效）排序功能在 旧上运行 Djanga Interactive CMS。在搜索Codepen之后，我发现了一些我认为可以用作基础的东西，但它根本就没有用。

直播网站为here。

Djanga有很多很多限制，不仅仅是jQuery的东西，而且我在过去不接受代码时遇到了问题 - 或者只是完全剥离代码。例如，使用<form>来包装片段只是因为没有它，Djanga会将代码读作文本。

因此，我相信当你看代码时，你会看到很多丑陋的黑客。

所以，如果我可以问那些比我更了解的人......这里发生了什么？什么不正常工作？

以下是我正在使用的代码段，如您所见，工作正常此处。

input[type="checkbox"] {
    display:none;
}

.wrapper {
  margin: 100px auto 50px;
  width: 96%;
  max-width: 900px;
  padding: 20px;
}
.wrapper img {
  max-width: 100%;
  width: 24%;
  margin: 0.25%;
}
.wrapper label {
  display: inline-block;
  width: 24%;
  padding: 10px;
  margin: 0 0.25% 10px;
  text-align: center;
  background: #365DA1;
  border: 7px solid white;
  border-radius: 5px;
  box-shadow: 1px 1px 5px #333;
  color: white;
  font-size: 20px;
  text-shadow: 1px 1px 1px #333;
}
.wrapper input {
  display: none;
}
.wrapper input:checked ~ img {
  display: none;
}
.wrapper input:checked + label {
  background: #f1c40f;
}
.wrapper #murraycontroller:checked ~ .billmurray {
  display: inline-block;
}
.wrapper #dogecontroller:checked ~ .doge {
  display: inline-block;
}
.wrapper #vanillacontroller:checked ~ .vanillaice {
  display: inline-block;
}
.wrapper #catcontroller:checked ~ .cat {
  display: inline-block;
}

	<h2>Sortable</h2>

<div class="wrapper">
  <h1>Only show me pictures of:</h1>
  
  <form>
<input type="checkbox" name="controllers" id="murraycontroller">
  <label class="murraycontroller" for="murraycontroller">Bill Murray</label>
<input type="checkbox" name="controllers" id="dogecontroller">
  <label class="dogecontroller" for="dogecontroller">Doge</label>
<input type="checkbox" name="controllers" id="vanillacontroller">
  <label class="vanillacontroller" for="vanillacontroller">Vanilla Ice</label>
<input type="checkbox" name="controllers" id="catcontroller">	
  <label class="catcontroller" for="catcontroller">Cats</label>

    
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.placekitten.com/200/200" alt="" class="photo cat">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">
  <img src="http://www.nicenicejpg.com/200/200" alt="" class="photo vanillaice">
  <img src="http://www.placedoge.com/200/200" alt="" class="photo doge">
  <img src="http://www.placekitten.com/200/200" alt="" class="photo cat">
  <img src="http://www.fillmurray.com/200/200" alt="" class="photo billmurray">  
</form>
</div>

这真是令人生畏。我甚至不喜欢发布这个，因为我确信这似乎是一个愚蠢的问题，但我会感谢任何想要提供的想法或方向。非常感谢你。

Answer 1

您的实际网站上有这种风格：

.overlay img {
    display: inline!important;
}

删除!important，它将优先于您为<img />创建的所有其他显示样式（即.wrapper input:checked ~ img { display: none; }）。

谨慎使用!important ...它只是覆盖由javascript添加的内联样式。懒惰的开发者会在他们感到沮丧并且不理解CSS特异性时将!important添加到样式

当我将其转换到CMS时，为什么CSS排序（使用复选框hack）不起作用？

1 个答案: