簡化CSS選擇器根

請參考下我指定的根元素，並應用css具體的控制每一次的CSS代碼簡化CSS選擇器根

#AdminUser .admin-label-margin { 
margin-left: 160px; 
margin-top: -25px; 
padding-bottom: 10px; 
} 
#AdminUser #entitytitle h4 { 
margin-left: 175px; 
padding-bottom: 13px; 
} 
#AdminUser input[type='text'] { 
    width: 180px; 
} 
#AdminUser .admin-label-span { 
    margin-left: -15px !important; 
    margin-right:12px; 
}

。我不想要這種情況。我如何簡化上面的css並一次指定根選擇器？

來源

2014-02-14 SivaRajini

您可以使用CSS預處理庫一樣LESS它允許你使用嵌套的語句來表達你的CSS 。

所以它可以讓你寫

#AdminUser { 
    .admin-label-margin { 
    margin-left: 160px; 
     margin-top: -25px; 
     padding-bottom: 10px; 
    } 

    #entitytitle h4 { 
     margin-left: 175px; 
     padding-bottom: 13px; 
    } 

    input[type='text'] { 
     ... 
    } 

    .admin-label-span { 
     ... 
    } 
}

但一旦處理它會輸出的CSS在標準非嵌套格式的瀏覽器。即。它會產生原始的CSS：

#AdminUser .admin-label-margin { 
margin-left: 160px; 
margin-top: -25px; 
padding-bottom: 10px; 
} 
#AdminUser #entitytitle h4 { 
margin-left: 175px; 
padding-bottom: 13px; 
} 
#AdminUser input[type='text'] { 
    width: 180px; 
} 
#AdminUser .admin-label-span { 
    margin-left: -15px !important; 
    margin-right:12px; 
}

記住，如果使用得少，你有幾個方面的考慮：

運行.LESS的彙編.css文件作爲構建過程
或使用上飛的轉換與少的JavaScript
- 你可能會得到FOUC的
- 你需要檢查你的web服務器是幸福服務的少MIME類型

從積極的一面，你會得到混入，變量和所有善良少帶你旁邊的編碼語法便利您正在尋找。

來源

2014-02-14 12:05:27

LESS可能是有用的：

#AdminUser { 
    & .admin-label-margin { 
     margin-left: 160px; 
     /* ... */ 
    } 
    /* ... */ 
}

來源

2014-02-14 11:58:11

'＆'在那裏是多餘的。當它是選擇器部件的一部分時（'＆：before'等），它很有用。 –

CSS不支持此。但是，您可以使用預處理器，如Sass/SCSS。

隨着SCSS：

#AdminUser { 
    .admin-label-margin { 
     /* snip */ 
    } 
    /* snip */ 
}

注意，最終代碼將類似於原單，SCSS 轉換上面的代碼，你目前擁有的一個，這樣就可以更輕鬆地開發。

來源

2014-02-14 11:58:21

+1只是一個側面說明：薩斯應該寫爲「薩斯」而不是「薩斯」:) –

@HashemQolami：謝謝，編輯。 –

沒有辦法在CSS中簡化它。

你可以使用一個CSS預處理語言，如SASS，這將允許您：

#AdminUser { 
    .admin-label-margin { 
     margin-left:160px; 
     margin-top:-25px; 
     padding-bottom:10px 
    } 

    #entitytitle h4 { 
     margin-left:175px; 
     padding-bottom:13px 
    } 

    input[type='text'] { 
     width:180px 
    } 

    .admin-label-span { 
     margin-left:-15px!important; 
     margin-right:12px 
    } 
}

來源

2014-02-14 11:59:15 Quentin

簡化CSS選擇器根

回答

相關問題