html 如何在检查输入后定位标记

4zcjmb1e 于 2023-05-15 发布在其他

关注(0)|答案(2)|浏览(87)

我想改变我的HTML页面的<main>标签中的内容的外观时，在头导航输入框被选中。这个问题适用于我正在做的一个项目，但这里有一个简化的版本，显示了我的代码结构：

nav input:checked+main {
  background-color: red;
}

<header>
  <nav>
    <input type="checkbox">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </nav>
</header>
<main>
  Main page content
</main>

理想情况下，我也希望以<main>标记之后的<footer>为目标。我尝试了各种选择器组合，但主要内容的风格没有改变。请注意，理想情况下，我不想改变页面的结构。

Html

来源：https://stackoverflow.com/questions/76211775/how-to-target-a-tag-once-an-input-is-checked

2条答案

按热度按时间

mwyxok5s1#

你不能做nav input:checked+main，因为main不是输入的兄弟（这是相邻的兄弟组合子+检查的）。你可以尝试新的:has伪类：

header:has(nav input:checked) + main {
  background-color: red;
}

<header>
  <nav>
    <input type="checkbox">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </nav>
</header>
<main>
  Main page content
</main>

其工作方式基本上是仅当条件是:has(nav input:checked)部分为真时才针对header + main。

赞(0）回复(0）举报 2023-05-15

nwo49xxi2#

添加到已接受的答案。对于旧的浏览器支持，你需要将你的input元素移到header元素之外，然后你可以在下面写css来实现这一点。浏览器支持hashere

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    input[type="checkbox"]:checked~main  {
        background-color: red;
        border: 1px solid red;
    }
    </style>
    
</head>
<body>
  <input type="checkbox">
  <header>
    <nav>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </nav>
  </header>
    <main>
        Main page content
    </main>
</body>
</html>

赞(0）回复(0）举报 2023-05-15

我来回答

html 如何在检查输入后定位标记

2条答案

相关问题

热门标签

最新问答