伪类

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

  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. 解决win7下PIL无法打开图片的问题

    找到PIL安装文件里的ImageShow.py 把第99行的 return "start /wait %s && del /f %s" % (file, file) ...

  2. css伪类的展现

    常见的伪类选择器 :link :hover :active :visited 如果为以上几个伪类赋予相同css属性名,不同的css属性值 <!DOCTYPE html> <html ...

  3. 解决错误: Failed to load class "org.slf4j.impl.StaticLoggerBinder"

    当报这个错时,就很难看到我们自己输出的日志,系统运行情况后台无法得到输出.解决方案是加入以下依赖: <dependency> <groupId>org.slf4j</gr ...

  4. 解决方法 test: database removal failed: ERROR: database &quot;test&quot; is being accessed by other users

    select * from pg_stat_activity where datname='test'; 找出哪个进程用了这个数据库,然后删除这个进程(pid) kill -9 47182 然后再删除 ...

  5. 一些需要被禁用的php危险函数

    phpinfo() 功能描述:输出 PHP 环境信息以及相关的模块、WEB 环境等信息。 危险等级:中 passthru() 功能描述:允许执行一个外部程序并回显输出,类似于 exec()。 危险等级 ...

  6. 小试牛刀-嘿嘿,创建job了

    今天 周六,我写了这个存储过程.用意:检查 数据库中是否有 该类的 job,如果有那么取job_name  赋值给 job_old,    把job_old加上时间戳 改造成 job_new.那么jo ...

  7. 带着问题写React Native原生控件--Android视频直播控件

    最近在做的采用React Native项目有一个需求,视频直播与直播流播放同一个布局中,带着问题去思考如何实现,能更容易找到问题关键点,下面分析这个控件解决方法: 现在条件:视频播放控件(开源的ijk ...

  8. java数组集合元素的查找

    java数组和集合的元素查找类似,下面以集合为例. 数组集合元素查找分为两类: 基本查找: 二分折半查找: 基本查找: 两种方式都是for循环来判断,一种通过索引值来判断,一种通过数组索引判断. 索引 ...

  9. 使用Python+turtle绘制同心圆

    问题描述:数学定义上是指:同一平面上同一圆心而半径不同的圆.简单来说就是:圆心相同半径不同的圆,如果几个圆的圆心是同一点,那么这几个圆就叫做同心圆. 本文使用turtle绘制一个类似“箭靶”的同心圆. ...

  10. 给centos 7添加硬盘空间

    前言 今天在安装ambari的时候,制作amberi本地yum源的时候出现了一个问题,虚拟机的磁盘空间不足了,后来发现是因为这个节点之前本来只打算作为数据节点使用的,后来所以后来只给它分配了20G的硬 ...