CSS : last-of-type이 작동하지 않습니다.

HTML 양식을 만들고 CSS을 추가 중입니다. 내가 마지막 input 상자에 경계를 그리려고 CSS : last-of-type이 작동하지 않습니다.

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

처럼

<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 같은 내 HTML 보이는 외모, 나는

.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에 있습니다.

내가 뭘 잘못하고 있니?

출처

2017-04-07 daydreamer

는 클래스가 아닌 요소와 함께 작동합니다. 그런 다음 그 것이었다 :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>

출처

2017-04-07 23:01:48

, 덕분에 많은 @Michael – daydreamer

@daydreamer 멋진 NP와 목표, 자신의 부모에 .pt-form-input-group 요소를 넣을 수 있습니다. –

CSS : last-of-type이 작동하지 않습니다.

답변

관련 문제