改變使用兩個CSS類時的樣式

-1

我想要做的是創建默認的CSS樣式，當我將多個類結合在一起時，我想重寫另一個類的一些默認樣式。這是我正在嘗試做的一個例子。改變使用兩個CSS類時的樣式

的style.css

.navBar { 
    position:absolute; 
    left:0px; 
    right:0px; 
    width:100%; 
    height:50px; 
    background-color: #333333; 
} 
.fixed { 
    position: fixed; 
} 
.top { 
    top:0px; 
} 
.left { 
    float:left; 
    left:0px; 
} 
.navBar .left { 
    width: 50px; 
    height:100%; 
}

在我的HTML，如果我有那麼它將只使用樣式.navBar但是當我嘗試做<div class="navBar left">我希望它覆蓋.navBar的寬度和高度但保持從.navBar和.left的一切

我不想把高度和寬度放在.left中，因爲我想保持它儘可能通用。

來源

2016-08-27 Juan Sierra

使用CSS選擇器.navBar.left。這將檢查類別爲navBar的任何元素也具有left的類別。目前您正在使用.navBar .left。而不是檢查一個元素是否具有這兩個類，它檢查所有

來源

2016-08-27 21:37:42

子類left的元素您可能不應該有像.fixed和.top這樣的特定類。我建議你想象一個你想要樣式的基類（即：你的navBar），並且添加其他類來修改它們（如左圖）。閱讀關於BEM（塊，元素，修飾符）或其他任何方法的一些信息，以使CSS更加模塊化，並嘗試將其緩慢應用於CSS。

你總是可以堆棧類來使它們更加具體（優先），比如.navBar.left或者對超級特定的類（比如只設置一個屬性的那些類）使用！重要，但是使用這些技術太多而你的CSS很快就會變得不穩定，難以維護。

瞭解如何更好地組織和組織您的CSS。它會得到回報！

來源

2016-08-27 21:40:04 rafaelbiten

首先，不要用camelCase風格編寫類名，它不適用於css，see why。

這是應用，並通過添加多個類擴展默認樣式的例子，點擊運行代碼剪斷看到它在行動

html, body{ 
 
    margin: 0; 
 
} 
 
.nav-bar { 
 
    position:absolute; 
 
    top: 100px; 
 
    width:100%; 
 
    height:50px; 
 
    background-color: #AC92EC; 
 
    text-align: center; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    background-color: #A0D467; 
 
} 
 
.top { 
 
    top:0; 
 
} 
 
.left { 
 
    left:0; 
 
    width: 200px; 
 
    background: #48cfad; 
 
}

<div class="nav-bar"> 
 
    defualt navbar 
 
</div> 
 

 
<div class="nav-bar left"> 
 
    left navbar 
 
    </div> 
 

 
<div class="nav-bar fixed top"> 
 
    fixed and top navbar 
 
</div>

來源

2016-08-27 22:02:30

改變使用兩個CSS類時的樣式

回答

相關問題