提问者:小点点

为什么“input”元素上的“default+label”伪类不工作? 特别是“+标签”部分


“:default”单独工作,但是当你在伪类上添加“label”时,它就不工作了。

null

.pseudo-test input:default {
  box-shadow: 0 0 20px 20px red;
}

.pseudo-test input:default+label {
  color: coral;
}
<div style="margin-top:200px" class="pseudo-test">

  <form action="another-action.php">


    <label for="summer">Select your gender:</label>
    <input type="radio" id="summer" name="radio-selection" value="value-of-a-radio" checked>
    <button>Press to submit</button>

  </form>

</div>

null

“:default”只起作用,但是当你通过键入“default+label”来添加“label”时,它就不起作用了。 伪类应该应用于输入的标签,但是它没有工作。


共1个答案

匿名用户

+用于选择紧随其后出现在标记中的相邻同级项; 不能用CSS选择以前的同级。 但是,您可以通过将标签直接放置在输入之后并将其向左浮动来实现类似的效果。

null

.pseudo-test input:default {
    box-shadow:0 0 20px 20px red;
    }
    
    
.pseudo-test input:default + label {
  color: coral;
  float: left;
  margin-right: 5px;
}
<div style="margin-top:200px" class="pseudo-test">

        <form action="another-action.php">
        
        
            
            <input type="radio" id="summer" name="radio-selection" value="value-of-a-radio" checked>
            <label for="summer">Select your gender:</label>
            <button>Press to submit</button>
            
        </form>
    
    </div>