CSS基於條件

Question

/* BOC - GRID VIEW */ 
 
.ribbongrid { 
 
    position: absolute; 
 
    left: 10px; top: -5px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 75px; height: 75px; 
 
    text-align: right; 
 
} 
 
.ribbongrid span { 
 
    font-size: 10px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    font-weight: bold; line-height: 20px; 
 
    transform: rotate(-45deg); 
 
    width: 100px; display: block; 
 
    background: #79A70A; 
 
    background: linear-gradient(#9BC90D 0%, #79A70A 100%); 
 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
 
    position: absolute; 
 
    top: 19px; left: -21px; 
 
} 
 
.ribbongrid span::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0px; top: 100%; 
 
    z-index: -1; 
 
    border-left: 3px solid #79A70A; 
 
    border-right: 3px solid transparent; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #79A70A; 
 
} 
 
.ribbongrid span::after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0%; top: 100%; 
 
    z-index: -1; 
 
    border-right: 3px solid #79A70A; 
 
    border-left: 3px solid transparent; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #79A70A; 
 
} 
 
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);} 
 
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;} 
 
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;} 
 

 
.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);} 
 
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;} 
 
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;} 
 
/* EOC - GRID VIEW */ 
 

 
/* BOC - LIST VIEW */ 
 
.ribbonlist { 
 
    position: absolute; 
 
    left: 10px; top: 5px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 75px; height: 75px; 
 
    text-align: right; 
 
} 
 
.ribbonlist span { 
 
    font-size: 10px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    font-weight: bold; line-height: 20px; 
 
    transform: rotate(-45deg); 
 
    width: 100px; display: block; 
 
    background: #79A70A; 
 
    background: linear-gradient(#9BC90D 0%, #79A70A 100%); 
 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
 
    position: absolute; 
 
    top: 19px; left: -21px; 
 
} 
 
.ribbonlist span::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0px; top: 100%; 
 
    z-index: -1; 
 
    border-left: 3px solid #79A70A; 
 
    border-right: 3px solid transparent; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #79A70A; 
 
} 
 
.ribbonlist span::after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0%; top: 100%; 
 
    z-index: -1; 
 
    border-right: 3px solid #79A70A; 
 
    border-left: 3px solid transparent; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #79A70A; 
 
} 
 
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);} 
 
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;} 
 
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;} 
 

 
.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);} 
 
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;} 
 
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;} 
 
/* EOC - LIST VIEW */

if (Grid_View = 'True') { 
 
    <div class="ribbongrid blue"><span>Special</span></div> 
 
} else { 
 
    <div class="ribbonlist blue"><span>Special</span></div> 
 
}

兩個CSS之間的唯一差別是改變從網格的高度左：10px的;頂部：-5px; ----------> list left：10px; top：5px;

這只是一個例子。有沒有一種方法來結合兩個CSS來優化代碼而不是複製和粘貼幾次？

Answer 1

只需創建兩個新類（用於從左側網格改變高度：10px;頂部：5px; ---------->列表左側：10px;頂部：5px;）並且擁有一切CSS的常見CSS。然後使用JavaScript在這兩個類之間切換。

例如：
通過你給出的代碼可以修改這個樣子，

CSS：

/*RIBBON GRID*/ 
.ribbon_grid { 
    left: 10px; 
    top: -5px; 
} 

/*RIBBON LIST*/ 
.ribbon_list { 
    left: 10px; 
    top: 5px; 
} 

/*COMMON CODE FOR BOTH RIBBONS*/ 
.ribbon { 
    position: absolute; 
    z-index: 1; 
    overflow: hidden; 
    width: 75px; height: 75px; 
    text-align: right; 
} 
.ribbon span { 
    font-size: 10px; 
    color: #fff; 
    text-transform: uppercase; 
    text-align: center; 
    font-weight: bold; line-height: 20px; 
    transform: rotate(-45deg); 
    width: 100px; display: block; 
    background: #79A70A; 
    background: linear-gradient(#9BC90D 0%, #79A70A 100%); 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
    position: absolute; 
    top: 19px; left: -21px; 
} 
.ribbon span::before { 
    content: ''; 
    position: absolute; 
    left: 0px; top: 100%; 
    z-index: -1; 
    border-left: 3px solid #79A70A; 
    border-right: 3px solid transparent; 
    border-bottom: 3px solid transparent; 
    border-top: 3px solid #79A70A; 
} 
.ribbon span::after { 
    content: ''; 
    position: absolute; 
    right: 0%; top: 100%; 
    z-index: -1; 
    border-right: 3px solid #79A70A; 
    border-left: 3px solid transparent; 
    border-bottom: 3px solid transparent; 
    border-top: 3px solid #79A70A; 
} 
.red span {background: linear-gradient(#F70505 0%, #8F0808 100%);} 
.red span::before {border-left-color: #8F0808; border-top-color: #8F0808;} 
.red span::after {border-right-color: #8F0808; border-top-color: #8F0808;} 

.blue span {background: linear-gradient(#2989d8 0%, #1e5799 100%);} 
.blue span::before {border-left-color: #1e5799; border-top-color: #1e5799;} 
.blue span::after {border-right-color: #1e5799; border-top-color: #1e5799;} 

JAVASCRIPT：

if (Grid_View = 'True') { 
    <div class="ribbon ribbon_grid blue"><span>Special</span></div> 
} else { 
    <div class="ribbon ribbon_list blue"><span>Special</span></div> 
} 

希望這有助於:)

Answer 2

可以實現這樣說：

if (Grid_View = 'True') { 
    <div class="ribbongrid blue"><span>Special</span></div> 
} else { 
    <div class="ribbongrid ribbonlist blue"><span>Special</span></div> 
} 

和你的CSS：

.ribbongrid { 
    position: absolute; 
    left: 10px; 
    top: -5px; 
    z-index: 1; 
    overflow: hidden; 
    width: 75px; height: 75px; 
    text-align: right; 
} 

.ribbongrid.ribbonlist { 
    top: 5px; 
} 

這將覆蓋從頂級到-5px 5PX