演示

Question

我想使用选择器last-of-type来仅定位应用程序中每个表单中的最后一个输入。

那是html：

＆＃13;

.form-input:last-of-type {
          margin-bottom: 10px;
      }

＆＃13;

      <form role="form"
          method="POST"
          action="{{ route('login') }}">
          {{ csrf_field() }}
          <div class="form-input">
              <label>Username</label>
              <input id="email"
                  placeholder="Enter your email"
                  type="email"
                  name="email"
                  value="{{ old('email') }}"
                  required autofocus>
          </div>
          <div class="form-input"> <!-- That's the element I want to target-->
              <label>Password</label>
              <!-- or this one -->
              <input id="password"                   
                  placeholder="Enter your password"
                  type="password"
                  name="password"
                  required>                          
          </div>

          <div class="buttonWrapper">
              <button type="submit">Login</button>
          </div>
          <div style="padding-bottom: 20px;" class="text--center">
              <a class="text--uppercase text--condensed" href="">
                  Forgot Your Password?
              </a>
          </div>
      </form>

＆＃13;

基本上我希望最后一个.form-input类有更多的padding-bottom或者最后一个.form-input的输入有更多的margin-bottom（效果相同）。

我试图使用这样的东西：

该代码目标也是第一个输入，在每个输入之间添加一个边距。

我也尝试过：最后一个孩子，但如果我想要定位的节点下面有更多节点，那么它们就无法工作。

有解决方法吗？

Answer 1

根据我上面的评论，最后一个类型仅适用于直接父级，因此如果在该输入周围有一个包装div，则无法定位表单的最后一个输入元素（它将代替该包装器的最后一个输入）。遗憾的是，您无法通过课程来定位最后一个＆＃34; .form-input＆＃34;。

我可以看到这样做的唯一方法就是使用JavaScript，而不使用像nth-child那样不可靠的东西（以及编辑HTML以添加额外的类或其他东西）。幸运的是，获取最后一个.form-input并添加一个＆＃34; .last＆＃34;非常简单。如果你不反对这样做：

document.querySelectorAll('form').forEach(function(el) {
   el.querySelectorAll('.form-input')[el.querySelectorAll('.form-input').length-1].classList.add('last2');
});

编辑：已更新以处理所有表单。

Answer 2

很遗憾，您无法在此类情况下使用last-of-type。您可以通过将所有form-input包装在一起来实现相同的结果：

<div class="form-input-container"> <!-- Apply margin here-->
    <div class="form-input">...</div>
    <div class="form-input">...</div>
    ....
</div>
<div class="buttonWrapper">

Answer 3

而不是<div>和<label>使用<fieldset>和<legend>，因为：

它使你的<form>语义完美。
看起来更好
使用CSS作为在DOM中查找元素的主要方法是非常有限的，因此在任何地方使用<div>和<span>都会降低您获取特定选择器的机会。

现在你的布局是语义的，使用nth-of-type是没有道理的：

演示

＆＃13;

fieldset:last-of-type {
  margin-bottom: 50px;
  border-color: red
}

＆＃13;

<form role="form" method="POST" action="{{ route('login') }}">
  {{ csrf_field() }}
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>
  <fieldset class="form-input">
    <legend>Username</legend>
    <input id="email" placeholder="Enter your email" type="email" name="email" value="{{ old('email') }}" required autofocus>
  </fieldset>
  <fieldset class="form-input">
    <legend>Password</legend>
    <input id="password" placeholder="Enter your password" type="password" name="password" required>
  </fieldset>

  <div class="buttonWrapper">
    <button type="submit">Login</button>
  </div>
  <div style="padding-bottom: 20px;" class="text-center">
    <a class="text-uppercase text-condensed" href="">
              Forgot Your Password?
          </a>
  </div>
</form>

＆＃13;

Answer 4

:last-of-type伪类意味着＆＃34;其类型的最后一个元素（即具有此标记名称）在容器＆＃34;中。在您的标记中，您要选择的元素不是容器中的最后一个div，因此它与选择器不匹配。

在CSS选择器级别3中，无法选择＆＃34;具有特定类＆＃34;的最后一个元素。 CSS选择器级别4中存在这种可能性（在您的情况下，它将是:nth-last-child(1 of .form-input)），但它仅在Safari中受支持。

要解决您的问题，有以下几种方法：

为.form-input包装器和其他包装器使用不同的标签，所以您可以使用:last-of-type选择最后一个（作为 zer00ne 建议）;

假设.form-input包装器始终位于表单中的其他内容之前，您可以将上边距添加到最后.form-input之后的下一个元素，而不是.form-input的下边距}，使用如下选择器：.form-input + :not(.form-input) { margin-top: 10px; }

最后一个类型的选择器没有按预期工作

4 个答案:

演示