输入与标签分属不同div的问题及CSS规则失效排查（仅可修改CSS）

Hey there! Let’s tackle these two form-related issues one by one—they’re super common when you’re stuck with a fixed HTML structure but need to fix accessibility and styling.

First off, the core fix for association issues is leaning into native HTML attributes, even if your elements are split across divs. Here’s what you need to do:

• Make sure every <input> has a unique id attribute, and its corresponding <label> has a for attribute that matches that exact id. This is non-negotiable for accessibility (screen readers rely on it) and ensures clicking the label toggles the input, no matter where they are in the DOM.
  Example of correct markup:

  <div class="input-box">
    <input type="radio" id="choice-1" name="survey-options">
  </div>
  <div class="label-box">
    <label for="choice-1">Yes, I agree</label>
  </div>
  

• If you’re still seeing visual disconnects (like focus states not styling the label), you can use CSS to link their states—more on that in the next section, since it ties into the CSS rule issue.

Since your old CSS worked when inputs and labels were in the same <tr> (siblings), the problem is that your selectors can’t traverse the new div structure. Here are actionable fixes based on common DOM setups:

Scenario 1: Input div is immediately followed by its label div #

If your DOM pairs each input div with a label div right after it (like input div 1 → label div 1 → input div 2 → label div 2), use the :has() selector (supported in all modern browsers) to target the label:

/* When a radio input is checked, style its corresponding label */
div:has(input[type="radio"]:checked) + div label {
  font-weight: bold;
  color: #2ecc71;
  cursor: pointer;
}

The :has() selector lets you target the div containing the checked input, then the adjacent div (the label’s container), and finally the label itself.

Scenario 2: You need broader browser support (no :has()) #

If you have to support older browsers, you can target each radio-label pair individually using their id and for attributes. Since you only have two radios, this is manageable:

/* Style label for first checked radio */
#radio-1:checked ~ div:nth-of-type(2) label[for="radio-1"] {
  background-color: #f0f8ff;
  padding: 2px 4px;
}

/* Style label for second checked radio */
#radio-2:checked ~ div:nth-of-type(4) label[for="radio-2"] {
  background-color: #f0f8ff;
  padding: 2px 4px;
}

The ~ selector targets all subsequent sibling elements, so div:nth-of-type(2) picks the second div (your first label’s container) after the checked input.

Pro Tip: Keep Selectors Specific #

Make sure your CSS selectors aren’t being overridden by more specific rules. If your old code used tr input:checked + label, bump up the specificity of your new selectors (e.g., add a parent class if available) to ensure they take priority.

内容的提问来源于stack exchange，提问作者Alexander