Question

我的结构包含以下布局：

<!-- 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来实现所需的定位吗？

Answer 1

使用表单元素，伪类和伪元素，您可以根据条件和/或指示状态执行基本效果。

:before和content显示消息
:target进行基本点击处理。
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>

存在作用于提供基本元素的元素的CSS

1 个答案:

段