我有一个包含以下布局的结构:
<!-- UL element not always rendered out -->
<ul class="alerts">
<li>text</li>
<li>text</li>
</ul>
<!-- /UL element -->
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
<div id="z1"></div>
<div id="z2"></div>
<div id="e">
<div id="e1"></div>
<div id="e2"></div>
</div>
ul.alerts 元素由 CMS 动态生成，并取决于其他因素，因此它可能会或可能不会在运行时在代码中呈现。我想在 div.e1 和 div.e2 元素上实现一些 CSS 如果 ul.alerts 类被呈现到代码中。
我已经确定了以下 CSS，但我觉得我遗漏了什么...？
ul.alerts ~ #e > #e1 {
margin-top: -15px;
}
ul.alerts ~ #e > #e2 {
margin-top: -44px;
}
...基于如果 ul.alerts 元素未呈现到代码中，此 CSS 将不会被执行，让 div.e1 和 div.e2 恢复到它们的默认边距值-顶部。
然而，这似乎不起作用...根据我的代码结构，关于我需要更改 CSS 以实现所需目标的任何想法？
最佳答案
使用表单元素、伪类和伪元素，您可以根据条件和/或指示状态来实现基本效果。
:before和content显示消息:基本点击处理的目标。input[type="checkbox"]:checked和input[type="checkbox"]:not(:checked)用于持久状态/条件.
片段
input[type="checkbox"] + ul.alerts {
display: block;
}
input[type="checkbox"]:checked + ul.alerts {
display: none;
}
a {
text-decoration: none;
}
#lvl1,
#lvl2 {
opacity: 0;
transition: all 1s;
}
#lvl1:target {
color: orange;
opacity: 1;
}
#lvl2:target {
color: red;
opacity: 1;
}
input[type="checkbox"]:not(:checked) ~ #e > #msg:before {
content: 'ALARM - ARMED';
color: green;
font-weight: bolder;
text-decoration: overline underline;
}
input[type="checkbox"]:checked ~ #e > #msg:before {
content: 'UNARMED}}}}}}}';
color: grey;
text-decoration: line-through;
}<!doctype html>
<html>
<meta charset='utf-8'>
<head>
</head>
<body>
<label for="chx1">Disable Alarm:</label>
<input id="chx1" type="checkbox">
<ul class="alerts">
<li id="lvl1">WARNING!</li>
<li id="lvl2">DANGER!</li>
</ul>
<!-- /UL element -->
<div id="z1"></div>
<div id="z2"></div>
<div id="e">
<div id="msg"></div>
<button><a href="#lvl1">Threat 1</a>
</button>
<button><a href="#lvl2">Threat 2</a>
</button>
</div>
</body>
</html>关于html - 提供基本元素的 CSS 作用于元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37848058/