伪类

基于当前元素所处的状态或具有的特性,用于设置元素自身的特殊效果。

  1. a:link  规定所有未被点击的链接;

  2. a:visited  匹配多有已被点击过的链接;

  3. a:active  匹配所有鼠标按下未松开的元素;

  4. a:hover  匹配所有鼠标移入/悬停在元素上的元素;

  5. :focus  被选中的元素;

  6. :first-child 元素的第一个子元素;

  7. :lang允许创作者来定义指定元素中使用的语言;

伪类的规定:

由于css的优先级问题,下面四个伪类需要按顺序书写,否则会出现问题

L(link)V(visited)H(hover)A(active)

love  and  hate(爱与恨)

伪类hover的拓展:

  1. E:hover{} 对自身产生影响;
  2. E:hover  F{} 对子元素F产生影响(当F需要隐藏时)
  3. E:hover + F{} 对兄弟元素产生影响;

一定要注意用E元素的伪类设置效果的作用对象跟E元素的关系(自身、子元素、兄弟元素)然后使用对应的选择器设置。

伪元素

基于元素的抽象,它跟伪类的区别就是它依赖于元素,其自身可作为一个抽象的元素来使用,行内元素,伪元素使用时要用两个冒号,但为兼容IE只写一个冒号。

  1. ::before   元素之前

  2. ::after  元素之后

  3. ::first-letter  文本的首字母

  4. ::first-line  文本的首行

伪元素清除浮动:clearfix类

.clearfix{
      content: '';
      display: block;
      clear:both;
}    

.clearfix{;}/*兼容IE*/

伪元素设置小三角形:

如上图,消息提示框上前面的小三角形即为伪元素设置,代码如下:

.tips{/*消息框*/
        position: relative;
        width: 180px;
        padding: 10px;
        background-color: #56A9D3;
        border-radius: 4px;
    }

.tips:before{
     /*相对于消息框设置位置*/
     position: absolute; top: 30%; left: -20px; content: ""; width: 0px; height: 0px; border: 10px solid transparent;/*用border的颜色来设置三角形显示,三边透明*/ border-right-color: #56A9D3; }

一定要注意伪元素需要设置content之后才会显示出来,content: '';设置后才是真正的插入一个内容,即便为空也要设置。

【CSS】伪类和伪元素选择器的更多相关文章

  1. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  2. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  3. CSS 高级:尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

  4. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  5. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  6. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  7. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  8. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  9. 《转载》详解 CSS 属性 - 伪类和伪元素的区别

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

随机推荐

  1. 编译Hadoop

    Apache Hadoop 生态圈软件下载地址:http://archive.apache.org/dist/hadoop/hadoop下载地址 http://archive.apache.org/d ...

  2. Oracle警告、跟踪文件(10046、死锁等跟踪)

    跟踪文件由各个后台进程生成,警报日志中记录关键操作包括:     ·所有启动和关闭命令,包括中间命令,如alter database mount     ·实例的所有内部错误(ORA-600错误,只能 ...

  3. C++类构造析构调用顺序训练(复习专用)

    //对象做函数参数 //1 研究拷贝构造 //2 研究构造函数,析构函数的调用顺序 //总结 构造和析构的调用顺序 #include "iostream" using namesp ...

  4. WinDriver&PCIE

    1.安装VS2012 安装VS2012略过,主要用它来做数据传输应用程序的,WINDRIVER提供了一系列API接口,方便了用户,使用户能直接进入用户态的编程,因为内核态的编程它已做好,不需要进行修改 ...

  5. SQL的定义与使用

    一.SQL的定义 SQL(structured query language)即结构化查询语句,是关系数据库的标准语言. SQL的特点有: 1.综合统一 SQL集数据定义语言DDL.数据操作语言DML ...

  6. 表单同时有中文字段和文件上传,加上enctype="multipart/form-data"后导致的中文乱码问题

    因为一个表单需要同时上传字段和文件,所以加上enctype="multipart/form-data",但是上传后的中文字段变成了乱码. 把enctype="multip ...

  7. $Django redis内存数据库 (知识回顾cmd切换目录)

    知识小回顾 #切换盘 C:\Users\WangDong>f: F:\> #切换文件 F:\>cd redis F:\redis> #返回上一级 F:\DJ\dj8>cd ...

  8. javascript中的异步编程

    正常情况下js都是顺序执行的,但是也有很多场景下实际上是异步操作: 1.定时器都是异步操作 2.事件绑定都是异步操作 3.AJAX中一般我们都采取异步操作(也可以同步) 4.回调函数可以理解为异步(不 ...

  9. web socket RFC6455 frame 打包、解包

    #ifndef __APP_WEBSOCKET_FRAME_H__ #define __APP_WEBSOCKET_FRAME_H__ #include "memory.hpp" ...

  10. 第一章:深入.NET框架

     1..net框架结构 主要包含公共语言运行时(CLR)和框架类库(.NET Framework 类库 ,FCL) 2.CLR 1.对于一个将要面向.NET平台进行开发的人来说,了解一下.NET平台的 ...