深入理解CSS伪元素

html-css014

深入理解CSS伪元素,第1张

伪元素顾名思义伪装成元素,但不是元素,这与生成内容相关。生成内容主要指由浏览器创建的内容,而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现,当然伪元素还包括:first-line,:first-letter和::selection

:first-letter

指定一个元素第一个字母的样式

注意1:所有前导标点符号应与第一个字母一同应用该样式

注意2:只能与块级元素关联

注意3:只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-letter中存在连接符的原因

:first-line

设置元素中第一行文本的样式

注意1:只能与块级元素关联

注意2:只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-line中存在连接符的原因

:before(IE7-浏览器不支持)

在元素内容的最开始插入生成内容

注意:默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用

:after(IE7-浏览器不支持)

在元素内容的最后插入生成内容

注意:默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用

::selection(IE8-浏览器不支持)

匹配被用户选择的部分

注意1:firefox浏览器需要添加-moz-前缀

注意2:只支持双冒号写法

注意3:只支持颜色和背景颜色两个样式

下面是伪元素的速查表

【content属性】

content属性应用于before和after伪元素

【1】 <string>里面的内容会原样显示,即使包含某种标记也不例外。

注意1:如果希望生成内容中有一个换行,则需要使用\A

注意2:若是一个很长的串,需要它拆分成多行则需要用\对换行符转义

【2】 <uri>

【3】attr( <identifier>)

<补充>【quotes属性】

管理引号

【4】open-quote|close-quote

【5】counter

首字下沉

钉子效果

图片叠加效果

CSS:

【CSS 压缩】 【CSS优化】【CSS 速查表】 CSS -【中文字体—>编码表】

Testing【检测css错误】

JQUERY:

【jQuery 查询 】 【jQuery 在线手册】 【jQuery源代码查看工具】

网站整体优化:

W3C CSS 验证服务

字体:

IcoMoon App - 【字体图标】 【Iconfont-阿里巴巴】 【字体图标】Font Awesome Icons

图表(饼状,柱状,折线等)插件:

【ECharts】各种图(折线,柱形图等)

【基于Kissy的图表组件集 基于Kissy的图表组件集 】

其他:

【正则表达式】【二维码生成器】 【PNG压缩】 【代码的规范】 【WebStorm】

【Emmet快捷方式查询】

DW中快速找到CSS类别步骤:

需要将css样式的这个窗口打开,然后你在DW的边界上就能看到这个css的窗口,如图:

然后这些显示出来的css中右键,有个菜单选择转到代码,就调到了指定的代码区域