控制first-letter伪类的背景

普通人说实话

普通人说实话

2016-02-20 00:30

今天图老师小编给大家展示的是控制first-letter伪类的背景,精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

OL定义有序列表的时候,除非指定list-style-position:inside;,否则文字和前导符是有缩进的。

但有的时候,OL定义的列表类型有限制,比如不能定义汉字的一、二、三,我们只好手动来输入这些字符,但这下文字和字符连在一起。

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

这个时候就可以使用first-letter这个伪类来帮忙了:

运行代码框

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行] 渲染结果:

这下,前导符就和文字保持一定距离了,而且能控制的样式也更多一点。
不过前导符后面那个顿号就控制不到样式了,但我想可不可以设置背景图来取代呢?
简单测试却发现,控制first-letter伪类的背景,与控制list-style-image一样让人琢磨不透,遂弃之。

另外,各个浏览器对待前导符旁边的符号处理方式也不一样,因为没有安装Safari,所以没有测试它:

代码:

 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

IE8和FF3和Opera表现一致,Chrome只对左侧的符号进行处理,IE6、7就只处理了第一个字符。

展开更多 50%)
分享

猜你喜欢

控制first-letter伪类的背景

Web开发
控制first-letter伪类的背景

CSS教程:first-letter伪类元素的特点

Web开发
CSS教程:first-letter伪类元素的特点

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS教程:first-letter实现首字下沉

Web开发
CSS教程:first-letter实现首字下沉

css伪类伪元素

Web开发
css伪类伪元素

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

学习CSS的伪类

Web开发
学习CSS的伪类

伪类--动态链接

Web开发
伪类--动态链接

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

网站重构:论述XHTML2.0和HTML5.0

网站重构:论述XHTML2.0和HTML5.0

再论清除浮动的空DIV方法

再论清除浮动的空DIV方法
下拉加载更多内容 ↓