你不知道的CSS(三)

在前面两篇文章《你不知道的CSS(一)》和《你不知道的CSS(二)》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助,本文作为《你不知道的CSS》系列的第三篇文章,将继续在CSS技巧方面进行探讨,不同于前两篇的是,本文将着重介绍CSS中伪类和伪元素在项目中的应用场景。伪类相信大家最熟悉也是用的最多的莫过于,,之类的,因为这些在平常的项目中太常用了(然而我目前依然见过还有用js去添加类来变化背景色的同学)。而伪元素如,相信大家也用的烂熟了。 当然对于比较常见的伪类(元素)不在本文的讨论范围类,本文主要介绍一些生僻的但是又非常实用的伪类(元素)。CSS的世界已经变天了,抛开过去,拥抱变化吧~

伪类和伪元素的区别

伪类和伪元素是一个比较容易混淆的概念,这不仅仅是从名称上,而且在写法上也是相似的(目前因为兼容性的问题,它们的写法是一致的)。这就更容易混淆了。但还是希望大家在书写的过程中养成习惯,至于兼容性交给postcss等转换工具去实现。

规范

css3 明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

区别

伪类更多的定义的是状态,如,或者说是一个可以使用CSS进行修饰的特定的特殊元素,如

伪类使用一个冒号

常见伪类:

伪元素简单来说就是不存在于DOM文档树中的虚拟的元素,它们和HTML元素一样,但是你又无法使用JavaScript去获取,如

伪元素使用两个冒号

常见伪元素:

用和来做表单即时校验

html5丰富了表单元素,提供了类似,,等表单元素属性。同样的,我们可以利用和来做针对html5表单属性的校验。

伪类指定具有required 属性的表单元素

伪类指定一个通过匹配正确的所要求的表单元素

伪类指定一个不匹配指定要求的表单元素

有没有最开始学的感觉,快点直戳demo感受下吧

用来实现折叠面板

是文档的内部链接,即后面跟有锚名称 #,指向文档内某个具体的元素。

利用的特性可以实现以前只能使用JavaScript实现的显示隐藏或者

用来排除其他选择器

表示的是一个的概念。我在项目mo-css上用到过很多次,尤其是在表单类中,我用它来设置表单元素在和状态之外的等状态,以便于当元素在和时,元素不具有状态。

用来实现隔行变色

等伪类的参数大多是一个数值或者数学表达式,而作为参数用来表示,作为参数用来表示的类似于别骂的特性往往被忽略。

用来美化选中文本

就像你用鼠标选中这段话看到的那样,用来设置选中文本的样式,从而改变浏览器一成不变的文本选中色(蓝色)。

用来美化占位符

用来修饰等表单元素属性的样式。

用来实现段落首字下沉

首字下沉 : 设置段落的第一行第一字字体变大,并且向下一定的距离,与后面的段落对齐,段落的其它部分保持原样

就像图中展示的那样,之前实现类似效果,我们需要多加一个标签,如:

然而,现在只需要一个CSS伪元素就可以实现。

伪元素用于向文本的首字母设置特殊样式

用来特殊标记段落第一行

就如它的名字一样,这个伪元素代表了段落的第一行,你可以使用任意样式来控制它。

小结

CSS的伪类和伪元素还有很多,因为或兼容性或其他原因,文章中介绍的几种伪类/元素用的比较少,这不得不说是一种遗憾。但,为了保证项目的健康和可持续化,一定要注意伪类和伪元素的区别,尽可能的在写伪类的时候使用一个冒号,而在写伪元素的时候用两个冒号,就像使用来生成浏览器前缀一样,将和的转换交给等工具去做。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180212G01RF600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券