时间戳

首页 > 解决方案 > 我的目的是能够检查和更改蓝色的颜色

html - 我的目的是能够检查和更改蓝色的颜色

问题描述

这是我的 HTML：我希望能够使用输入复选框来更改 p-tag 蓝色的颜色。但不知何故我做不到。

<nav>
<input type="checkbox" id="filter_lz" name="filter" value="Lange Zwaarden">
</nav>

<article>
  <section class="container_lz" id="check1">
    <p>Blue</p>
  </section>
  <section class="container_mz" id="check2">
    <p>Black</p>
  </section>
</article>

CSS：我找不到这不起作用的原因。

#filter_lz:checked ~ article #check1 {
  color: red;
}

.container_lz, .container_mz{
  color: blue;
  display: block
}

标签： htmlcss

解决方案

因为您的输入与文章不是同级的，请尝试以下操作：

#filter_lz:checked ~ article #check1 {
  color: red;
}

.container_lz, .container_mz{
  color: blue;
  display: block
}
<input type="checkbox" id="filter_lz" name="filter" value="Lange Zwaarden">

<article>
  <section class="container_lz" id="check1">
    <p>Blue</p>
  </section>
  <section class="container_mz" id="check2">
    <p>Black</p>
  </section>
</article>

推荐阅读