/ css

少用的CSS伪元素

什么是伪元素

伪元素表示为某个元素的子元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。因为伪元素并不在文档树中,所以通过JS,也抓取不到伪元素,也不能给它绑事件。

::first-line:可以给第一行定义样式 (浏览器会随着放大或缩小来换行)
::first-letter:可以给的第一个字母定义样式 (以英文來看是第一个字母;中文就是第一个中文字)
::before:可以在元素之前插入样式/內容
::after:可以在元素之后插入样式/內容

什么时候用伪元素

HTML 标签的目的,就是为了展示内容信息。非内容信息要使用伪元素。所谓的非内容信息,指的是一些对内容进行修饰的信息。例如登录的说明等,当然还有许多更加酷炫的效果。

伪元素的具体使用

1.清除浮动
我们在清除 float 的時候,经常使用<div style="clear: both"> </div>,但是这样会造成过多无意义的容器产生,为了避免这样的情況,我们可以使用::before以及::after帮我们清除 float喔。

.clear::before, .clear::after { content: ""; display: block; } .clear::after { clear: both; }
2.图形用户界面图标
利用::before以及::after做出一大堆 CSS GUI icons,使用户体验更好。
speach bubble
具体的制作用到了许多css3,然而我并不会,还有border的利用。

原文与应用:pure css GUI icon

3.多种css对话样式
speach bubble
再次说一下利用borde,width,height可以构造出好多有趣的图形,具体怎么弄不再多说,因为传说中的涛哥哥已经分享过了。
原文与应用:pure css speach bubbles

4.媒体查询
利用媒体查询屏幕大小,并且利用伪元素改变不同的样式
media queries
上例同样是用::before以及::after在人名的前、后加入 E-mail 以及 icon。
原文与应用:css media queries

5.拉彩带
立志做文艺小白,所以在网站上制作自己的专属印记也是很酷炫的。现在网站上主要是利用伪元素 & CSS3 來实现。
beta
原文与应用:belt

6.tooltip应用
想要在文字段落里面做個简单的的 tooltip 功能,不用去找 jQuery 组件套用半天啦,利用伪元素就可以轻松实现了 。
看了例子,但还未实现,衰,怎么感觉还是JQ好!!

伪元素的一些坑

1.伪元素 after,before

  • 在某些元素上设置before,after无效。IE上无效的元素有:img,input,select,textarea;FireFox上无效的元素有:input,select,textarea;Chrome上无效的元素有input[type=text],textarea
  • 设置before,after的伪元素的样式中,必须设置content属性,否则将伪元素设置为块级元素,并且设置宽高,伪元素仍然不会显示
  • content属性如果是非法的,伪元素也不会显示。如果content的值是常量,必须用单引号或多引号括起来。如,content:'abc';。如果content的值是该元素的某个属性于常量组合而成的,常量仍然要用单引号或多引号括起来,之间不需要加号。比如,伪元素显示元素的title属性,并且用()括起来。用content: '('attr(title)')';

2.伪元素 first-letter,first-line

  • first-letter,first-line只对display为block,inline-block之类的块级元素有效。

  • 对内容的开头是符号,或者第一个是英文字母或数字,第二个是符号的,使用first-letter来设置样式时,会对第一个字母和符号都生效。

说到这:

差不多结束了,其实我自己都不是很懂,只知道在css中的很多形状都是可以利用border,height, width做出来,再加之利用伪元素就可以实现千奇百怪的东东拉。
推荐一篇大作:基于单个div的css绘图

原谅我工作室带来了一次最水的分享!!!!