如何实现背景颜色适用于最后一个输入元素的最后一行答案

【问题标题】：How to acheive the background color apply for last row with last input element如何实现背景颜色适用于最后一个输入元素的最后一行
【发布时间】：2018-06-13 14:39:26
【问题描述】：

无法为一行中的最后一个元素设置背景颜色，我尝试了 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>

以上代码：我只需要在最后一个输入中为最后一行应用背景色

【问题讨论】：

标签： html css

【解决方案1】：

首先，您需要定位last-child of CCol
之后，目标 last-child 的 input 的那个特定的 CCol

总而言之，您可以使用类似这样的东西

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

这是工作的sn-p

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

【讨论】：

【解决方案2】：

看看这是不是你想要的。

.Row .CCol:last-child input:last-child {
  background: #003;
  color: #fff;
}

https://jsfiddle.net/Legk4sd1/4/

.Row .CCol:last-child input:last-child {
  background: #003;
  color: #fff;
}

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

【讨论】：

【解决方案3】：

如果我理解正确，那么这应该可以工作

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

【讨论】：

【解决方案4】：

.CCol:last-child .CWidth {
  background-color: #D1D1D1;
}

首先，您必须获取 .CCol 的最后一个孩子，然后才能获取最后输入的类名。你在最后一行的输入中有一个类名，所以不需要最后一个孩子

希望这会对您有所帮助。谢谢。

【讨论】：

【解决方案5】：

你也可以使用last-of-type

div div: last-of-type .CCol{
    backgroung-color:red;
}

【讨论】：