如何創建一個覆蓋另一個CSS樣式的CSS樣式

我有2個CSS樣式，除了一個特定的「寬度」，其他都不相同。如何創建一個繼承另一個CSS樣式但覆蓋屬性的CSS樣式？如何創建一個覆蓋另一個CSS樣式的CSS樣式

.FirstStyle 
    { 
     margin: 0px 0px 0px 8px; 
     position: relative; 
     display: inline-block; 

     height: 29px; 
     width: 5px; 

     float: left; 
    } 


    .SecondStyle 
    { 
     margin: 0px 0px 0px 8px; 
     position: relative; 
     display: inline-block; 

     height: 29px; 

     float: left; 
    }

來源

2016-05-25 n179911

如果您正在討論如何減少代碼重複，CSS還沒有此功能（還）。像LESS和Sass這樣的預處理器可以通過mixin來實現。 – zzzzBov

你可以試試這個方法

在二級寬度上面沒有定義

.FirstStyle, .SecondStyle 
{ 
    margin: 0px 0px 0px 8px; 
    position: relative; 
    display: inline-block; 

    height: 29px; 
    width: 5px; 

    float: left; 
}

在這裏，你只定義爲FirstStyle類的寬度。（反正做這個類別低於其他類別的事實可能會覆蓋上面指定的最終寬度）

.FirtsStyle 
{ 
    width: 5px; 
}

來源

2016-05-25 18:58:55 scaisEdge

謝謝。我嘗試了上述解決方案。但有些FirstStyle沒有「高度」和「浮動」屬性。當我在Chrome開發者工具中進行調試時。在FirstStyle元素的模擬風格中，float是'none'，height是0.你有什麼想法嗎？寬度是正確的，但。 – n179911

如何創建一個繼承另一個CSS樣式但覆蓋屬性的CSS樣式？

後續的CSS樣式會自動覆蓋前面的屬性，因此只需在要覆蓋的屬性下添加屬性，它將繼承除指定的新樣式以外的所有內容。

例子：

HTML：

<div class="someClass anotherClass"> 
    .... 
</div>

CSS：

.someClass { 
    width: 100px; 
    color: green; 
} 
.anotherClass { 
    width: 200px; <-- This will override the above values 
    color: red; 
} 
.someClass { 
    width: 450px !important; <-- The !important tag will override both suceeding as well as preceeding properties 
} 
.someClass { 
    width: 500px; <-- This will override the first two styling properties 
}

來源

2016-05-25 19:01:30

可以計算出CSS specificity value

如果元件具有內聯樣式，即自動獲勝（1,0,0,0 分）
對於每個ID值，應用0,1,0,0點
對於每個類值（或僞類或屬性選擇器），應用 0,0,1,0點
對於每個元素的參考，應用0,0,0,1點

筆記

通用選擇（*）沒有特異性值（0,0,0,0）
僞元素（例如:first-line）得到0,0,0,1不像他們僞類的弟兄得到0,0,1,0
僞類:not()本身不會增加特異性，只什麼裏面的括號內。
!important值附加一個CSS屬性值是一個自動的勝利。它甚至可以覆蓋標記中的內聯樣式。和!important值的唯一方法是可以被另一個！重要的規則稍後在CSS中聲明，並且在其他情況下具有相同或很大的特異性值。您可以將其視爲添加1,0,0,0,0到特異性值

來源

2016-05-25 19:01:57 nanilab

如何創建一個覆蓋另一個CSS樣式的CSS樣式

回答

相關問題