html - 如何使用最后一个输入元素实现最后一行的背景颜色

Question

无法为一行中的最后一个元素设置背景颜色，我尝试了 last-child css 属性，但无法修复。请提出任何其他方法。

<div  id= "row" class="Row">
                <label>Row1:</label>
                <div  id= "CCol1" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1"  class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol2" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol3" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol4" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol5" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
            </div>

以上代码: 我只需要为最后一次输入的最后一行应用背景色

Answer 1

• 首先，您需要定位 CCol 的 last-child
• 之后，目标 last-child of input of that particular CCol

总而言之，你可以使用这样的东西

.Row .CCol:last-child input:last-child {
  background-color: red;
}

这是工作片段

.Row .CCol:last-child input:last-child {
  background-color: red;
}

<div  id= "row" class="Row">
                <label>Row1:</label>
                <div  id= "CCol1" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1"  class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol2" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol3" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol4" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
                <div  id= "CCol5" class="CCol">
                    <input type="text" class="width100"><input type="number" placeholder="1" value="1" class="CHeight"><input type="number" placeholder="1" value="1" class="CWidth">
                </div>
            </div>