Question

我有这个html片段：

<form class="job-manager-form" enctype="multipart/form-data">



  <fieldset>
    <label>Have an account?</label>
    <div class="field account-sign-in">
      <a class="button" href="">Sign in</a>

    </div>
  </fieldset>


  <!-- Job Information Fields -->

  <fieldset class="fieldset-job_title">
    <label for="job_title">Job Title</label>
    <div class="field required-field">
      <input type="text" class="input-text" required="">
    </div>
  </fieldset>

  <fieldset class="fieldset-job_location">
    <label for="job_location">Location <small>(optional)</small></label>
    <div class="field ">
      <input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. &quot;London&quot;" value="" maxlength="">
      <small class="description">Leave this blank if the location is not important</small> </div>
  </fieldset>

  <fieldset class="fieldset-application">
    <label for="application">Application email/URL</label>
    <div class="field required-field">
      <input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
    </div>
  </fieldset>

</form>

我想在表单中选择第一个字段集。这就是我在做的事情：

form.job-manager-form:first-child {
  background-color: red;
}

但是它会选择所有的fieldset元素。怎么做：第一个孩子的工作？

JSFiddle是here。

Answer 1

你需要定位你想要的元素，然后说它是第一个孩子。

有一篇很好的文章解释了这些选择器是如何工作的：

useful-nth-child-recipies

＆＃13;

fieldset:first-child {
  background-color: red;
}

＆＃13;

<form class="job-manager-form" enctype="multipart/form-data">

  <fieldset>
    <label>Have an account?</label>
    <div class="field account-sign-in">
      <a class="button" href="">Sign in</a>

    </div>
  </fieldset>


  <!-- Job Information Fields -->

  <fieldset class="fieldset-job_title">
    <label for="job_title">Job Title</label>
    <div class="field required-field">
      <input type="text" class="input-text" required="">
    </div>
  </fieldset>

  <fieldset class="fieldset-job_location">
    <label for="job_location">Location <small>(optional)</small></label>
    <div class="field ">
      <input type="text" class="input-text" name="job_location" id="job_location" placeholder="e.g. &quot;London&quot;" value="" maxlength="">
      <small class="description">Leave this blank if the location is not important</small> </div>
  </fieldset>

  <fieldset class="fieldset-application">
    <label for="application">Application email/URL</label>
    <div class="field required-field">
      <input type="text" class="input-text" name="application" id="application" placeholder="Enter an email address or website URL" value="" maxlength="" required="">
    </div>
  </fieldset>

</form>

＆＃13;

Answer 2

fieldset:first-child {
  background-color: red;
 }

这会奏效。但是，您的第一个子字段集设置为display：none;所以它实际上不会显示背景颜色。

Answer 3

如果元素是其父元素的第一个子元素，则选择该元素。

您的选择器不会选择任何字段集。它选择表格。

字段集具有（默认）透明背景，因此您可以通过它们看到红色。

要选择您需要的表单的第一个子字段集：

form.job-manager-form > fieldset:first-child

CSS：first-child选择器如何工作

3 个答案: