CSS：最后一类不起作用

问题描述：

我正在创建一个HTML表单并将它添加到CSS。我HTML貌似CSS：最后一类不起作用

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

就是这样，非常感谢@迈克尔 – daydreamer

@daydreamer真棒NP目标。 –

CSS：最后一类不起作用

相关推荐