html - 如何在 CSS 中指定复杂的绝对引用

Question

我有一个 HTML 页面，其中包含一些单选按钮和一些相关的 fieldset，每个都有自己的 id。我想根据特定的单选按钮隐藏/查看 div。

附件Fiddle做这份工作。

这是HTML

<div id="FS1">External fieldset with radiobuttons

  <div class="row">
    <input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
    <label for="R1">Element 1</label>
    <input id="R2" name="Group1" type="radio" value="2"/>
    <label for="R2">Element 2</label>
    <input id="R3" name="Group1" type="radio" value="3"/>
    <label for="R3">Element 3</label>
    <fieldset class="fs" id="FS1-1">
      <legend>Header element 1</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText1" type="text"/>
        <label for="exampleInputText1">Input field in the first element</label></div>
    </fieldset>
    <fieldset class="fs" id="FS1-2">
      <legend>Header element 2</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText2" type="text"/>
        <label for="exampleInputText2">This is the input field for the second</label>
      </div>
    </fieldset>
    <fieldset class="fs" id="FS1-3">
      <legend>Header element 3</legend>
      <div class="form-group">
        <input class="form-control" id="exampleInputText3" type="text"/>
        <label for="exampleInputText3">And this is the last input field</label>
      </div>
    </fieldset>
  </div>
</div>

这是CSS

#FS1 div input:not(:checked) ~ #FS1-1, #FS1-2, #FS1-3 { display: none; } /* to hide all the detail elements */
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; } /* to show only the 1th elem */
#FS1 div input[value="2"]:checked ~ #FS1-2 { display: block; } /* to show only the 2nd */
#FS1 div input[value="3"]:checked ~ #FS1-3 { display: block; } /* to show only the 3rd */

现在，我想要实现的是将 fieldset 重新定位到 div 之外，在片段的末尾，但这会破坏 css 引用和片段不再运行。

下面是想要的片段，没有运行。我需要有关如何重新定义 CSS 的建议

<div id="FS1">External fieldset with radiobuttons

  <div class="row">
    <input checked="checked" id="R1" name="Group1" type="radio" value="1"/>
    <label for="R1">Element 1</label>
    <input id="R2" name="Group1" type="radio" value="2"/>
    <label for="R2">Element 2</label>
    <input id="R3" name="Group1" type="radio" value="3"/>
    <label for="R3">Element 3</label>
  </div>
  <fieldset class="fs" id="FS1-1">
    <legend>Header element 1</legend>
    <div class="form-group">
      <input class="form-control" id="exampleInputText1" type="text"/>
      <label for="exampleInputText1">Input field in the first element</label></div>
  </fieldset>
  <fieldset class="fs" id="FS1-2">
    <legend>Header element 2</legend>
    <div class="form-group">
      <input class="form-control" id="exampleInputText2" type="text"/>
      <label for="exampleInputText2">This is the input field for the second</label>
    </div>
  </fieldset>
  <fieldset class="fs" id="FS1-3">
    <legend>Header element 3</legend>
    <div class="form-group">
      <input class="form-control" id="exampleInputText3" type="text"/>
      <label for="exampleInputText3">And this is the last input field</label>
    </div>
  </fieldset>
</div>

Answer 1

因此，您的要求无法通过纯 CSS 实现，但可以通过 Javascript 实现。

这就是为什么您当前的 HTML 结构不可能，因为您当前的 HTML 结构如下所示:

使用相应的(简化的)代码:

#FS1 div input:not(:checked) ~ #FS1-1, #FS1-2, #FS1-3 { display: none; } /* to hide all the detail elements */
#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; } /* to show only the 1th elem */
#FS1 div input[value="2"]:checked ~ #FS1-2 { display: block; } /* to show only the 2nd */
#FS1 div input[value="3"]:checked ~ #FS1-3 { display: block; } /* to show only the 3rd */

<div id="FS1">
  <div class="row">
    <input checked="checked" id="R1" name="Group1" type="radio" value="1"/>    
    <fieldset class="fs" id="FS1-1"></fieldset>
    <fieldset class="fs" id="FS1-2"></fieldset>
    <fieldset class="fs" id="FS1-3"></fieldset>
  </div>
</div>

作为一个简单的例子，我将解释为什么这行代码有效:

#FS1 div input[value="1"]:checked ~ #FS1-1 { display: block; }

1. 访问 ID FS1
2. 访问 HTML 实体 div，它是 FS1 的 child
3. 访问状态 :checked 和内部 value="1"
的 HTML 实体 input
4. 访问 id FS1-1 的 sibling 元素 (~)
5. 为 FS1-1 设置 display: block 的属性

要注意的关键是选择了 sibling 元素。

根据您提议的 HTML 变更集(见下文)，您将需要访问状态 :checked 的 HTML 实体 input 的 parent 元素 和内部 value="1" 然后从那里访问 sibling，因为 FS1-1 不再位于 div class="row"，而不是在它外面。

根据 Wikipedia :

Some noted limitations of the current capabilities of CSS include: Selectors are unable to ascend. CSS currently offers no way to select a parent or ancestor of an element that satisfies certain criteria.

这里也提到了这一点:Is there a CSS parent selector?

There is currently no way to select the parent of an element in CSS. In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

老实说，这可能不值得一战，如果可能，请将 fieldset 留在 div class="row" 中。

如果您希望继续将其转换为 Javascript 解决方案，请引用以下相关资源:

• > Javascript Parent Element
• > Set Style Javascript
• > Get Attribute Javascript
• > Next Sibling Javascript