博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
伪类与伪元素
阅读量:5899 次
发布时间:2019-06-19

本文共 797 字,大约阅读时间需要 2 分钟。

看到这几个词,有点傻傻分不清,故总结一下。

 

那么什么是伪类呢?之所以说它是“伪”的,不是为了赶时髦,其实可以理解为,它不是真正的一类对象,而是一类对象的某种状态。

比如一类链接<a>的hover状态,就是个“伪”的类。

而伪对象呢,可以理解为本身不是单独的全新的对象,而是将已有的某些对象中划分出来一些,所以是“伪”对象。

伪类:

:link :hover :active :visited :focus :first-child :first :left :right :lang

伪元素:

:first-letter :first-line :before :after

CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化

这么说很抽象,其实就是为了描述一些现有CSS无法描述的东西。

 

一个伪类 first-child 举例,这个容易混淆:

<ul>
<li></li>
<li></li>
</ul>
如果我要描述 ul 的第一个元素,我无须嵌套新的元素,我只须给第一个已经存在的 li 添加一个类名就可以了:

<ul>

<li class="first-child"></li>
<li></li>
</ul>

 

最为混淆的,可能是大部分人都将 :before 和 :after 这样的伪元素

CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:

伪类用一个冒号表示 :first-child

伪元素则使用两个冒号表示 ::first-line
因为低版本IE对双冒号的兼容问题,几乎所有的CSSer在写样式的时候都不约而同的使用了单冒号。

归根结底,会用就行,毕竟标准还不完善,而且看了很多资料也是云里雾里,不知所以然就做好知其然吧。

 

转载于:https://www.cnblogs.com/nostic/p/5746249.html

你可能感兴趣的文章
CentOS 6.4下PXE+Kickstart无人值守安装操作系统
查看>>
Spring Boot 教程系列学习
查看>>
PHP 打印函数之 print print_r
查看>>
学生信息管理系统分析和感想
查看>>
如何在ASP.NET中生成HTML5离线Web应用
查看>>
阿里云里Centos 7 PHP7环境配置 LNMP
查看>>
年卡在手,城墙我走: 记葡萄城控件团队建设
查看>>
__set魔术方法可不可以加private属性
查看>>
MySQL 4种事务的隔离级别
查看>>
跟我一起学docker(13)--docker Machine的使用
查看>>
有关Java字符编码的一些问题
查看>>
二:Unit 4
查看>>
影响英语单词拼写的6大因素
查看>>
计算机硬件基础知识
查看>>
SQLServer删除/重建/禁用/启用外键约束
查看>>
Makefile之深入浅出
查看>>
Unity3D播放视频
查看>>
linux运维工程师必会技能,用mail向qq邮箱发邮件。
查看>>
Spring AOP源码分析(四)Spring AOP的JDK动态代理
查看>>
99%的程序都没有考虑的网络异常
查看>>