Question

我正在创建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

我做错了什么？

Answer 1

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

进行定位

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

CSS：last-of-type无效

1 个答案: