简化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选择器根

回答

相关问题