在Sass中选择类
提问于 2014-09-23 17:29:55
我有一个表单，在每个输入上都有一个标签：
<label>My Label</label>我用以下方式设置样式：
label {
&:before {
background-color: red;
}
}我为每个标签添加了一个类：
<label class="blue">My Label</label>
<label class="yellow">My Label</label>如何在Sass中为每个类选择before？
label {
&:before {
background-color: red;
&.blue {
background-color: blue; //???????
}
}
}请注意，我使用::before选择器的原因是为了做一些比改变标签背景颜色更复杂的事情，我只是用它作为一个简单的例子。
回答 2
Stack Overflow用户
发布于 2014-09-23 17:59:05
下面是几种编写SASS的方法，它们将生成label:before、label.blue:before、label.yellow:before
label {
&:before{
background-color:red;
}
&.blue:before{
background-color: blue;
}
&.yellow:before{
background-color:yellow;
}
}
label {
&:before{
background-color:red;
}
&.blue{
&:before{
background-color: blue;
}
}
&.yellow{
&:before{
background-color:yellow;
}
}
}通常，伪元素需要位于选择器的末尾，并且本身没有类。Sass会在你写的时候渲染它。我不确定浏览器会用来做什么。
伪元素通常也有一个content属性，它是应用样式的。除非在css中的其他位置设置了“content”属性，否则不会应用上面的css。
您可以在bootstrap[http://getbootstrap.com/css/#helper-classes-clearfix]中找到标准的clearfix解决方案，就是对::before和::after的操作
// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a Mixin
.element {
.clearfix();
}Stack Overflow用户
发布于 2014-09-23 17:36:43
你需要这样写它：
label {
&:before {
background-color: red;
}
&.blue{
background-color:blue;
}
}如果你使用你的版本，你会得到label:before.blue而不是你想要的label.blue
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26001207
复制相关文章
](https://ask.qcloudimg.com/http-save/yehe-1207259/ock6csygi9.png)
点击加载更多
腾讯云开发者
