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具有某种高度。您可以手动设置，也可以只插入一些内容。

<强> HTML

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

<强> CSS

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

http://jsfiddle.net/439dx/1/

Answer 3

如果主要目标是覆盖由于某种原因无法删除的内联样式中设置的边框，我建议使用属性选择器来定位它，而不是指望DOM中该div的特定位置：

.manufacturer_box div[style*="border-top"] {
   border-top: 2px solid #e0e0e0 !important; /* !important is necessary! */
}

Answer 4

正确的选择器是使用子选择器“>”，以确保仅选择父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 3” div。

HTML

<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，然后使用“>”仅选择正确的div。

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

<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中选择第二个第二个子div

4 个答案: