为同一个伪单元格中的两个字形添加不同的样式答案

【问题标题】：Adding different styles to two glyphicons in the same pseudo cell为同一个伪单元格中的两个字形添加不同的样式
【发布时间】：2017-05-09 14:24:56
【问题描述】：

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

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

请看下面的css类：

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

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

【问题讨论】：

你能提供一段你的 HTML 吗？
我是从 java 类 table.setHeaderStyle("weekdays", i - daysBefore, "dayinfo doubleSign");
你不能用一个选择器来做到这一点。
你可以使用 > :last-child > 我觉得很有帮助
@拉利特巴库尼。在哪里使用:last:child?

标签： html css glyphicons

【解决方案1】：

您可以在 .doubleSign 上声明两个 pseudo 选择器 :before 和 :after 并将 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>

【讨论】：

欢迎@ShruthiSathyanarayana :-)

【解决方案2】：

将这两个符号放入不同的<span> 或<i> 以使用不同的CSS 处理它们；因为不可能使用单个选择器为两个符号应用不同的 CSS。

【讨论】：