伪类

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

  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样式表及选择器相关内容(二)-伪类与伪元素选择器

    伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中)    1.a标签伪类选择器,其他标签类似        eg: ...

  2. CSS伪类和伪元素

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

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

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

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

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

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

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

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

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

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

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

  8. CSS的伪类和伪元素

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

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

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

随机推荐

  1. 【转】zigbee终端无法重连的问题解决

    zigbee终端无法重连的问题解决 1.zigbee重连的原因 (1)zigbee由于各种原因的干扰导致信号太差而掉线. (2)协调器重启. 2.zigbee终端重连的处理 (1)zigbee掉线后会 ...

  2. UIViewController中addChildViewController的作用

    当在一个ViewController中添加一个子ViewController时,UI部分可以直接通过addSubView的方法添加,例如: 在一个ViewControllerA中添加ViewContr ...

  3. HNU 12868 Island (简单题)

    题目链接:http://acm.hnu.cn/online/?action=problem&type=show&id=12868&courseid=272 解题报告:输入n*m ...

  4. JAVA反射机制—学习总结

    最近收到很多关于Java反射机制的问题留言,其实Java反射机制技术方面没有太多难点,或许是大家在学习过程中遗漏了细小知识点,导致一些问题无法彻底理解,现在我们简单的总结一下,加深印象.什么是反射机制 ...

  5. 前端代理nproxy

    一.场景/用途 前端代理的用途,相信大家都清楚.应用场景很多,如—— . 将线上的静态资源文件(JS.CSS.图片)替换为本地相应的文件,来调试线上(代码都被压缩过)的问题: . 本地开发过程,当后端 ...

  6. 《转》 Openstack Grizzly 指定 compute node 创建 instance

    声明:此文档仅仅做学习交流使用,请勿用作其它商业用途 作者:朝阳_tony 邮箱:linzhaolover@gmail.com 2013年6月4日9:37:44 星期二 转载请注明出处:http:// ...

  7. Oracle存储过程的简单示例

    ---创建一个表 create table TESTTABLE (   id1  VARCHAR2(12),   name VARCHAR2(32) ) select t.id1,t.name fro ...

  8. spring_08aop原理及案例

    *参考优质文档: https://www.cnblogs.com/xrq730/p/4919025.html 一.简介 aop(Aspect Oriented Programming)是面向切面编程, ...

  9. Java设计模式之十 ---- 访问者模式和中介者模式

    前言 2018年已经过去,新的一年工作已经开始,继续总结和学习Java设计模式. 在上一篇中我们学习了行为型模式的解释器模式(Interpreter Pattern)和迭代器模式(Iterator P ...

  10. linux----CenterOS7中在线安装jdk

    summary: 一直以来,都在windows上玩java,今天是一个具有里程碑的一天,感觉正式踏入进入了linux大门. 原来一直以为在linux上安装jdk,需要去官网下载适合linux的jdk, ...