自定义样式单个字母

Question

我想问一下，如果有一种方法可以为每个标志设置清洁方式（不使用例如<span></span>）数字吗？

附件中的一些例子。我们可以看到，让我们说＆＃34;翻转时钟＆＃34;效果。

我发现一些插件作为flipclock，但我不需要任何JS动画等等......

我只需要为每个符号添加一些背景来设置数字样式......

Answer 1

不，您只能选择带::first-letter的第一个字母。

您必须使用span元素来包装字符。

Answer 2

您不能单独设置每个字母的样式，也不能标记您的标记。 你需要有一个元素来围绕每个字母进行样式化。

例如：

span {
  position: relative;
  
  display: inline-block;
  width: 1em;
  padding: 0.25em 0;
  background: #333;
  border-radius: 5px;
  
  font-size: 50px;
  color: white;
  text-align: center;
}

span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0.2em;
  right: 0.2em;
  border-bottom: 0.2em solid #DDD;
}

<span>1</span>
<span>0</span>
<span>0</span>
<span>0</span>
<span>0</span>

Answer 3

我完全不明白这个问题，但假设一些事情可能会有所帮助。

span
{
  display:inline-block;
  height:80px;
  width:50px;
  font-size:40px;
  
}
.first
{
  
  color:blue;
  background:#ccc;
}

.second
{
  color:red;
  background:#f1f1f1;
}
.fifth
{
  color:white;
  background:red;
}
.third
{
  color:green;
  background:#666;
}
.fourth
{
  color:yellow;
  background:green;
}

<span class="first">1</span>
<span class="second">1</span>
<span class="third">1</span>
<span class="fourth">1</span>
<span class="fifth">1</span>

OR

如果您尝试编辑现有代码，可以使用n-th child selector 如果您知道父div名称，请在css中执行此操作。

.parentdiv:nth-child(2) {
    background: #ff0000; // applies this style to second element
}

Answer 4

添加此款式

<style>
.first{
    background:#000;
    color:#fff;
    padding: 10px;
    font-size: 50px;
    border-radius: 8px;
    position: relative;
}
.row {
    background: #fff;
    display: block;
    position: absolute;
    bottom: 1px;
    width: 35px;
    left: 5px;
    height: 10px;
}
</style>

添加此HTML代码

<span class="first">1<span class="row"></span></span>

我希望这会对你有帮助.... :)

演示https://jsfiddle.net/ashvin0999/3ee1waun/