9

嗨，我在从其父 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>

将不胜感激任何帮助。

4

4 回答 4

24

您需要从第二个 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; 
     }
于 2013-07-19T02:07:06.637 回答
1

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

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，并使用“>”仅选择正确的一个。

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

于 2020-05-11T15:31:22.423 回答
0

从第二个 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/

于 2013-07-19T02:06:01.853 回答
0

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

.manufacturer_box div[style*="border-top"] {
   border-top: 2px solid #e0e0e0 !important; /* !important is necessary! */
}
于 2013-07-19T02:20:38.340 回答