从父div中选择第二个第二个子div

Question

嗨我在从父div中选择第二个div时遇到问题.

这是我正在使用的:

.manufacturer_box div:nth-child(2){
 border-top: 2px solid #e0e0e0; 
 }

这是输出:

<div class="manufacturer_box">
    <div class="manufacturer_title">
        <h1>Title</h1>
        </div>
    <div style="border-top: 1px solid #e5e5e5; width: 100%; line-height: 22px;">
        <span style="color: #999999; font-size: medium;"><br> 
        <span style="color: #333333;"></span> </span>
    </div>
</div>

非常感谢任何帮助.

Answer 1

您需要从第二个div标签中删除内联样式

<div style="border-top: 1px solid #e5e5e5; width: 100%; line-height: 22px;">

它压倒了你的CSS风格.

无论出于何种原因,如果你想保持这种风格,请使用!important虽然我强烈不推荐这种方法,因为这是一种非常糟糕的做法,但这是一种选择(无论多么糟糕).

    .manufacturer_box div:nth-child(2) {
            border-top: 5px solid #e0e0e0 !important; 
     }

Answer 2

正确的选择器是使用子选择器“">”来确保仅选择父 div 的第二个子 div。如果您不使用 > 且仅使用：

.manufacturer_box div:nth-child(2){
    background: #FF0000;
    height: 200px; /* Manually set */
 }

这段代码不够具体，在提供的html中会选择“hello 1”和“hello 2”div。

所以正确的选择器是：

CSS

.manufacturer_box > div:nth-child(2){
    background: #FF0000;
    height: 200px; /* Manually set */
 }

这将仅选择“hello 2”div。

超文本标记语言

<div class="manufacturer_box">
    <div class="manufacturer_title">
        <h1>Title 1</h1>
        <div>
            <span style="color: #999999; font-size: medium;">hello 1 <br> 
            <span style="color: #333333;"></span> </span>
        </div>
    </div>
    <div>
        <span style="color: #999999; font-size: medium;">hello 2 <br> 
        <span style="color: #333333;"></span> </span>
    </div>
</div>

这是代码片段，删除“>”以测试它是否选择多个 div，并使用“>”仅选择正确的一个。

.manufacturer_box div:nth-child(2){
    background: #FF0000;
    height: 200px; /* Manually set */
 }

.manufacturer_box > div:nth-child(2){
    background: #FF0000;
    height: 200px; /* Manually set */
 }