Question

我有一个要求，我需要在单个伪单元格中显示两种不同的css样式。

我正在使用一个将两个unicode字符放入一个伪元素的类。但我想要两种不同的颜色。

请参阅以下css课程：

.doubleSign:before {    
  font-family: 'Glyphicons Halflings';
  content: "\e086\e101";
  font-size: 10px !important;
  margin-bottom: -7px !important;
 }

我该怎么做？请帮我。感谢。

Answer 1

您可以声明两个pseudo选择器：之前，之后.doubleSign并单独添加styling，因为无法将它们作为单个元素获取。

.doubleSign:before{    
  font-family: 'Glyphicons Halflings';
  content: "\e086";
  font-size: 10px !important;
  margin-bottom: -7px !important;
  color:blue;
}  
.doubleSign:after{    
  font-family: 'Glyphicons Halflings';
  content: "\e101";
  font-size: 10px !important;
  margin-bottom: -7px !important;
  color:red;
}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="doubleSign">

</div>

Answer 2

将两个符号放入不同的<span>或<i>，以便用不同的CSS对待它们;因为不可能使用单个选择器为两个符号应用不同的CSS。

在同一个伪单元格中为两个glyphicons添加不同的样式

2 个答案: