Question

我有一页问题，每个问题都有一个h5标题。为了增加一些空间，我在标题中添加了margin-top，但是我不想要第一个标题上的边距。它看起来很奇怪。

我一直在尝试使用h5:first-of-type删除它，但我似乎无法让它工作。我做错了吗？

.questionnaire h5:first-of-type{
  margin-top: 0;
}

.questionnaire h5{
  margin-top: 2em;
}

html看起来像这样

<div class="form-group">
  <label>
    <h5><span class="asterisk">*</span>required</h5>
  </label>
  <p>these are words here</p>
</div><!--.form-group-->
<div class="form-group">
  <label>
    <h5><span class="asterisk">*</span>required</h5>
  </label>
  <p>these are words here</p>
</div><!--.form-group-->  
<div class="form-group">
  <label>
    <h5><span class="asterisk">*</span>required</h5>
  </label>
  <p>these are words here</p>
</div><!--.form-group-->  
<div class="form-group">
  <label>
    <h5><span class="asterisk">*</span>required</h5>
  </label>
  <p>these are words here</p>
</div><!--.form-group-->  
<div class="form-group">
  <label>
    <h5><span class="asterisk">*</span>required</h5>
  </label>
  <p>these are words here</p>
</div><!--.form-group-->  
<div class="form-group">
  <label>
    <h5><span class="asterisk">*</span>required</h5>
  </label>
  <p>these are words here</p>
</div><!--.form-group-->

Answer 1

:first-of-type指直接父母。如果你有中间元素，它会“重置”你的计数器。举例说明问题：

.questionnaire h5:first-of-type{
    margin-top: 0;
    color: red;
}
.questionnaire h5{
    margin-top: 2em;
    color: blue;
}

<div class="questionnaire">
    <h5>Title 1</h5>
    <h5>Title 2</h5>
    <h5>Title 3</h5>
    <div>
        <h5>Title 4</h5>
        <h5>Title 5</h5>
        <div>
            <h5>Title 6</h5>
            <div>
                <h5>Title 7</h5>
            </div>
            <h5>Title 8</h5>
        </div>
    </div>
    <h5>Title 9</h5>
    <h5>Title 10</h5>
</div>

相反，请在first-of-type上使用.form-group：

.questionnaire .form-group:first-of-type h5 {
    margin-top: 0;
    color: red;
}
.questionnaire h5{
    margin-top: 2em;
    color: blue;
}

<div class="questionnaire">
    <div class="form-group">
      <label>
        <h5><span class="asterisk">*</span>required</h5>
      </label>
      <p>these are words here</p>
    </div><!--.form-group-->
    <div class="form-group">
      <label>
        <h5><span class="asterisk">*</span>required</h5>
      </label>
      <p>these are words here</p>
    </div><!--.form-group-->  
    <div class="form-group">
      <label>
        <h5><span class="asterisk">*</span>required</h5>
      </label>
      <p>these are words here</p>
    </div><!--.form-group-->  
    <div class="form-group">
      <label>
        <h5><span class="asterisk">*</span>required</h5>
      </label>
      <p>these are words here</p>
    </div><!--.form-group-->  
    <div class="form-group">
      <label>
        <h5><span class="asterisk">*</span>required</h5>
      </label>
      <p>these are words here</p>
    </div><!--.form-group-->  
    <div class="form-group">
      <label>
        <h5><span class="asterisk">*</span>required</h5>
      </label>
      <p>these are words here</p>
    </div><!--.form-group-->    
</div>

Answer 2

HTML代码

HTML

<div class="questionnaire">
    <h5>Title 1</h5> <!-- first-of-type -->
    <h5>Title 2</h5>
    <h5>Title 3</h5>
    <h5>Title 4</h5>
    <h5>Title 5</h5>
    <h5>Title 6</h5>
    <h5>Title 7</h5>
    <h5>Title 8</h5>
    <h5>Title 9</h5>
    <h5>Title 10</h5>
</div>

CSS

.questionnaire h5:first-child{
    margin-top: 0px;
   background-color:#066; color:#fff;
   }

.questionnaire h5{
    margin-top: 2em;
    color: blue;
}

工作正常..标题1适用于任何财产在css

Answer 3

看看这个小提琴： http://jsfiddle.net/j67y371c/

 .form-group h5:first-of-type{
      margin-top: 0px !important;
    }

    .form-group h5{
      margin-top: 2em;
    }

css first-of-type不工作？

3 个答案: