內部div有邊框 - 如何覆蓋外部div上的類？

嘿所有 - 簡單的CSS新手問題，但我似乎無法進入正確的問題問我的朋友谷歌。內部div有邊框 - 如何覆蓋外部div上的類？

如果一個內部div有一個添加邊框的類，我該如何將該div放入外部div並讓該類覆蓋這些邊框？

整件事情是第三方列表框。當它被創建時，我可以在後面的代碼中的外部div上添加樣式（ClassToOverrideBorders），但無法控制添加邊框的內部div。

<style> 
.UserControlStyle .ClassWithBorders 
{ 
    border: 1px solid #8e8e8e; 
    background: #FFF; 
} 
</style> 

<div class="UserControlStyle ClassToOverrideBorders"> 
    <div class="ClassWithBorders"> 
     <bunchofcontent /> 
    </div> 
</div>

我想可以使用jQuery做這個（類型，未測試）... $('.UserControlStyle > * .ClassToOverrideBorders').removeClass('ClassWithBorders');

想法？關於如何實現這一目標的文章的鏈接？

來源

2011-02-11 Thad Peiffer

你爲什麼不修改樣式？在你的代碼中，如果你將`border`設置爲`0px`，它會將其刪除。 – 2011-02-11 14:18:11

我無法這麼做，因爲他們的控件的每個實例都沒有邊框。只有當我將他們的控制嵌入到另一個控制中時，邊界纔不合適。爲了清楚起見，我沒有在我的初始帖子中添加太多的信息... – 2011-02-11 14:35:15

您可以使用直接子選擇器，以及border屬性的值更改爲none：

.UserControlStyle.ClassToOverrideBorders > .ClassWithBorders { 
    border: none; 
}

使用3類名以這種方式給人的規則特異性更高了。

來源

2011-02-11 14:17:58

+1 - 我對`>`完全消隱。 – 2011-02-11 14:18:48

謝謝！這很好，但我不得不添加！重要標籤來讓它覆蓋內部類。謝謝！！ – 2011-02-11 14:28:20

你可以嘗試通過明確的選擇設置樣式：

.ClassToOverrideBorders .ClassWithBorders 
{ 
    border: 0; 
}

來源

2011-02-11 14:18:11

這一切都需要提醒的是偶爾能接管專一「重要！」。

如果第三方的風格是：

.ClassWithBorders 
{ 
    border: 1px solid #8e8e8e; 
    background: #FFF; 
}

然後你就可以刪除那些邊框搭配：

.UserControlStyle .ClassWithBorders 
{ 
    border: 0; 
    background: #FFF; 
}

如果由於某種原因，這是行不通的，請嘗試：

.UserControlStyle .ClassWithBorders 
{ 
    border: 0 !important; 
    background: #FFF; 
}

如果這仍然不起作用，第三方工具可能會通過JavaScript應用邊框樣式，您不會是BLE覆蓋通過CSS（因爲負載&申請順序），你需要去與一個Javascript風格上的變化，如：

$('.ClassWithBorder').css('border', 0);

來源

2011-02-11 14:18:17 Walker

.ClassToOverrideBorders > div { 
    border: none!important; 
}

來源

2011-02-11 14:20:35

內部div有邊框 - 如何覆蓋外部div上的類？

回答

相關問題