前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧。

其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究竟什么是伪类?什么是伪元素?

伪类和伪元素的理解:

官方解释:

伪类一开始只是用来表示一些元素的动态状态,典型的就是大家常用的链接的各个状态(link、active、hover、visited),随后css2标准
扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无标识的“幽灵”分类。

伪元素则代表了某个元素的的子元素,这个子元素虽然逻辑上存在,但是并不实际上存在于文档树中,如我们平时用的after、before等。

自己粗浅的理解就是伪类就是一个无须标识的类,伪元素则就是一个元素,只是不存在与文档树中。

关于用法:伪类前面是一个冒号,伪元素前面则是两个冒号。E:first-child伪类,E::first-line伪元素。这是最新的css3标准,但是css2中
关于after和before都使用一个冒号,这里就需要大家注意了。而且css3还扩展了不少伪类,这里就不提了,感兴趣的自己可以去查资料。

常见应用:
伪类:
1.a链接样式 <a href="#">点击链接</a> a:hover{color:red} 鼠标悬浮字体变红。

2.隔行变色 <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul> ul li:nth-child(even){background-color:#ccc}或者ul li:nth-chilid(2):{background-clolor:#ccc}

伪元素:
清理浮动:
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

关于伪类和伪元素,就讲到这里,有关伪类和伪元素,能做出很多有意思的效果。

css常用属性初总结:伪元素和伪元素的更多相关文章

  1. css常用属性初总结:font

    平时在做项目时,UX常说的一句话就是“这里的字体不对吧,字体大小也不太对,你们前端有没有按规范来”,今天,我们就一起来看看这折磨人的font属性. 字体属性font-family 允许值 系列名 初始 ...

  2. css常用属性初总结第一弹:id和class选择器

    前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈. 类选择器:将html元素 ...

  3. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  4. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  5. css常用属性2

    1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和绝对定位已经说完,接下来就是浮动了. 什么是浮动? CSS 的 Float(浮动 ...

  6. css常用属性1

    1  背景相关 背景颜色 background-color     = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...

  7. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  8. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  9. css常用属性总结第二弹:id选择器

    承接上一篇class选择器,这一篇我们来说说css的id选择器. id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和cl ...

随机推荐

  1. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  2. Redis学习笔记-事务控制篇(Centos7)

    一.事务控制 1.简单事务控制 redis可以使用mult命令将之后的命令都存放在队列中,只有使用exec命令时才全部执行. 127.0.0.1:6379> multi OK 127.0.0.1 ...

  3. debugfs文件系统

    debugfs: https://www.cnblogs.com/helloworldtoyou/p/6281415.html /proc/bus/input/devices /sys/kernel/ ...

  4. 对ashx请求用Gzip,Deflated压缩

    //GZIP压缩 //查看请求头部 string acceptEncoding = context.Request.Headers["Accept-Encoding"].ToStr ...

  5. postgresql双机热备、高可用方案(采用pacemaker+corosync实现)

    http://blog.csdn.net/qguanri/article/details/51151974 需求描述 我们有两台centos7的数据库主机A.B.要对A.B实现双机热备,A作为数据库m ...

  6. logback日志分开纪录

    LogBack 日志 文件分开纪录 在处理Log中,我们一般讲Log分为一下几类,Debug类型,Error类型,Info类型 等等.. 那么使用LogBack如何分开日志处理 代码如下: 当然也可以 ...

  7. Android wm指令用法详解

    wm 是查看和设置显示信息的指令,此指令只能临时调试使用. wm:查看 wm 指令信息 $ adb shell root@rk3288:/ # wm wm usage: wm [subcommand] ...

  8. 代码规范 for node.js with 'npm-coding-style'

    npm-coding-style npm's "funny" coding style Description npm's coding style is a bit unconv ...

  9. virtualenv基本使用

    win 安装 virtualenv pip3 install virtualenv 创建虚拟环境 virtualenv env1 进入虚拟环境 env1/Scripts/activate 退出虚拟环境 ...

  10. "废物利用"也抄袭——“完全”DIY"绘图仪"<二、下位机程序设计>

    就不说怎么组装了吧,一把辛酸泪.说程序,因为这有两把辛酸泪……一把给下位机的C代码一把为了VB.NET的图像处理……不过就上上一篇说的,它们可以正确运行了,并且今天克服了Arduino上电过程中步进电 ...