Question

这是我的具体例子：

input:invalid+span:after {
    content: 'wrong';
    padding-left: 5px;
    color: #FF0000;
}

input:valid+span:after {
    content: 'correct';
    padding-left: 5px;
    color: #00B300;
}

<body>
    <div id="container">
        <form method="POST" action="send.php">
            <input id="email" type="email" name="email" required>
            <span class="validity"></span>
            <br />
            <input id="button" type="submit" name="submit" value="Send email">
        </form>
    </div>
</body>

我不想使用first-child，last-child等，因为这个CSS将在多个HTML页面中使用。问题是如何在我的CSS上使用类“有效性”来执行与此处所示相同的操作，但仅限于具有有效性类的跨度。

Answer 1

如果内容有效，请使用类似input:valid+span.validity:after的类来更改内容。

我还添加了div以及span而没有validity类来检查您的约束

input:invalid+span.validity:after {
  content: 'wrong';
  padding-left: 5px;
  color: #FF0000;
}

input:valid+span.validity:after {
  content: 'correct';
  padding-left: 5px;
  color: #00B300;
}

<body>
  <div id="container">
    <form method="POST" action="send.php">
      <div>
        <input id="email" type="email" name="email" required>
        <span class="validity"></span>
      </div>
      <div>
        <input id="email" type="email" name="email" required>
        <span></span>
      </div>
      <div>
        <input id="email" type="email" name="email" required>
        <div></div>
      </div>
      <input id="button" type="submit" name="submit" value="Send email">
    </form>
  </div>
</body>

选择一个类中的元素并在其后添加内容

1 个答案: