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

首先，您需要定位last-child

CCol

之后，定位last-child的{{1}} input

总结一下，你可以使用像这样的东西

CCol

以下是工作代码段

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

如果我理解正确，那么这应该有效

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

Answer 4

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

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

选择最后一个孩子

希望这会对你有所帮助。感谢。

Answer 5

您也可以使用最后一个

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

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

5 个答案: