html - CSS :last-of-type is not working

标签 html css

我正在创建一个 HTML 表单并向其添加 CSS。我的 HTML 看起来像 

<html>
  <body>
<div class="pt-form row">

  <!-- This will be the top layer for input box -->
  <div class="pt-form-input-group">
    <label>Label1</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>

  <div class="pt-form-input-group">
    <label>Label2</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>

  <!-- This will be of type drop-down -->
  <div class="pt-form-input-group">
    <label>Label3</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>

  <div class="pt-form-input-group">
    <label>Label4</label>
    <div class="pt-input-text-group">
      <input type="tel" class="pt-form-input">
    </div>
  </div>


  <div class="pt-form-submit">
    <a href="#">ADD</a>
  </div>
</div>

<!-- build:js scripts/main.min.js -->
<script src="scripts/main.js"></script>
</body>
</html>

和CSS看起来像

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html,
body {
  /*background-color: #ecf0f1;*/
  background-color: white;
  color: black;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

/* --- Form */
.pt-form {
  margin-top: 10%;
  margin-left: 25%;
}

.pt-form-input-group {
  position: relative;
  font-size: 14px;
  border: 1px solid #d3d5d8;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: none;
  width: 50%;
}

.pt-form-input-group:last-of-type {
  border-bottom: 1px solid #d3d5d8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 10%;
}

.pt-form-input-group label {
  color: #6f8691;
  display: block;
  margin-left: 2%;
  margin-top: 2%;
}

.pt-input-text-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}

.pt-form-input {
  height: 60px;
  width: 100%;
  padding: 15px 12px 10px;
  font-size: 22px;
  line-height: 32px;
  border: none;
}

.pt-form-submit {
  background-color: darkorchid;
  height: 60px;
  width: 50%;
  margin-top: 2%;
  padding-top: 20px;
  padding-left: 20%;
}

.pt-form-submit a {
  color: white;
  width: 100%;
  text-decoration: none;
}

我想在最后一个 input 框上画边框，我做了 

.pt-form-input-group:last-of-type {
  border-bottom: 1px solid #d3d5d8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 10%;
}

但是边框没有显示出来。该演示可在 https://codepen.io/harit66/pen/jBjamj 获得。

我做错了什么？

最佳答案

:last-of-type 适用于元素，而不是类。您可以将 .pt-form-input-group 元素放在它们自己的父元素中，然后使用 :last-child

作为目标 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus {
  outline: none;
}

html,
body {
  /*background-color: #ecf0f1;*/
  background-color: white;
  color: black;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

/* --- Form */
.pt-form {
  margin-top: 10%;
  margin-left: 25%;
}

.pt-form-input-group {
  position: relative;
  font-size: 14px;
  border: 1px solid #d3d5d8;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom: none;
  width: 50%;
}

.pt-form-input-group:last-child {
  border-bottom: 1px solid #d3d5d8;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-bottom: 10%;
}

.pt-form-input-group label {
  color: #6f8691;
  display: block;
  margin-left: 2%;
  margin-top: 2%;
}

.pt-input-text-group {
  position: relative;
  display: table;
  border-collapse: separate;
  width: 100%;
}

.pt-form-input {
  height: 60px;
  width: 100%;
  padding: 15px 12px 10px;
  font-size: 22px;
  line-height: 32px;
  border: none;
}

.pt-form-submit {
  background-color: darkorchid;
  height: 60px;
  width: 50%;
  margin-top: 2%;
  padding-top: 20px;
  padding-left: 20%;
}

.pt-form-submit a {
  color: white;
  width: 100%;
  text-decoration: none;
}
<html>

<body>
  <div class="pt-form row">

    <div>

      <!-- This will be the top layer for input box -->
      <div class="pt-form-input-group">
        <label>Label1</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

      <div class="pt-form-input-group">
        <label>Label2</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

      <!-- This will be of type drop-down -->
      <div class="pt-form-input-group">
        <label>Label3</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

      <div class="pt-form-input-group">
        <label>Label4</label>
        <div class="pt-input-text-group">
          <input type="tel" class="pt-form-input">
        </div>
      </div>

    </div>

    <div class="pt-form-submit">
      <a href="#">ADD</a>
    </div>
  </div>

  <!-- build:js scripts/main.min.js -->
  <script src="scripts/main.js"></script>
</body>

</html>

关于html - CSS :last-of-type is not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43288220/

上一篇：html - 向上滚动时如何使div元素位于导航栏下方

下一篇：javascript - 如何在具有跨度的 div 中分隔单词

相关文章：

jquery - 复杂的嵌套 UL 导航

css - 难以对齐 HTML header 元素

jquery 下拉菜单卡住

jquery - 连续动画元素的背景

html - CSS 样式不影响 PHP 中的段落

jquery - 将 .animate() 与 if/else 语句切换一起使用？

html - 自举比对

CSS:子菜单绝对定位的子菜单

html - 都试过了，body background-image extended beyond the content

javascript - .change() .css 宽度

©2024 IT工具网  联系我们