CSS：last-of-typeが機能していません

HTMLフォームを作成し、CSSを追加しています。私HTMLがCSS：last-of-typeが機能していません

<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にあります。

私は間違っていますか？

出典

2017-04-07 daydreamer

:last-of-typeは、クラスではなく要素で動作します。あなたはそれをした: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が機能していません

答えて

関連する問題