设置span最后一个字符的css样式

Posted 2023-04-19

<span class="test">0</span>
这个span的内容是动态的，比如100℃。我想单独设置℃的字体样式应该怎么写？

可以利用after伪类来实现：

<style>
.test font-size:48px
.test:after content:"℃"; font-size:32px; vertical-align:10px
</style>
<span class="test">100</span>

参考技术A css内控制说的是在外联的css文件中控制，这样方法的主要问题在于如何选中当前span，也就是平时所说的属性选择器。如果本身页面中存在很多的span那需要单独给想要添加样式的span添加一个class或者id（注：id具有唯一性），然后通过class或者id进行控制。代码如下：
html：
<span class="aa">aa</span>
<span id="bb">bb</span>
<span>cc</span>
CSS:
.aa color:red; /*aa显示为红色*/
#bb color:blue; /*bb显示为蓝色*/追问

他是动态获取的100℃，没法分开啊

在Css中如何设置span的背景颜色和背景图片

.MeGootoo | 2012年11月10日 10:31

<span style="background-color:#FF0000">背景颜色</span>

这个是用来设置背景颜色的，展现效果如下：

可以另外设置这个宽度大小，留一些空余的地方会更好看

<span>标签是不能设置背景图片的，这个是用来设置文字的样式的。可以在span标签之前添加一个<div></div>

代码和效果如下：

参考技术A 背景颜色 background-color:#颜色代码; 例如：background-color:#ff0000;
背景图片 background-image:url(图片路径名字); 例如：background-image:url(/images/123.gif); 参考技术B 给span增加一个class，例如：
<span class="title">文字</span>
然后css里写上：
.title background: #000 url("背景图片地址"); 参考技术C 给span增加一个class，例如：
<span class="title">文字</span>
然后css里写上：
.title background: #000 url("背景图片地址");