伪类

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

  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{zoom:;}/*兼容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. Java jvisualvm简要说明

    jvisualvm能干什么:监控内存泄露,跟踪垃圾回收,执行时内存.cpu分析,线程分析... jvisualvm已经被集成在jdk1.6以上的版本中(不是jre).自身运行需要最低jdk1.6版本, ...

  2. Js-字符串截取substring,分割split,指标indexOf,拼接John

    函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: var theString=”jpg|bmp|gif|ico|png”; var arr=theString.spli ...

  3. TNS-12541: TNS: 无监听程序 TNS-12560: TNS: 协议适配器错误 TNS-00511: 无监听程序

    文章转自:http://www.luocs.com/archives/464.html 此文版权归作者 – yaogang所有,转载请注明yaogang©www.luocs.com. Luocs说:这 ...

  4. 开源项目:libbpg

    1 ubuntu下编译libbpg(编译机器64bit) 安装cmake,libpng,yasm,gcc,g++ cmake版本最低为2.8.8,安装完毕后使用cmake --version查看是否安 ...

  5. Emgu CV 高斯建模

    Codeprivate void button1_Click(object sender, EventArgs e) { Emgu.CV.Capture cap = new Capture(" ...

  6. laydate时间插件更换皮肤

    <script> ;!function(){ laydate.skin('molv'); laydate({ elem: '#demo' }) }();</script>

  7. Oracle RAC 实验环境RMAN备份v1.01

    Oracle RAC 实验环境RMAN备份v1.01 环境:RHEL 6.5 + Oracle GI 11.2.0.4 + RAC 11.2.0.4 (2 nodes) 需求:制定RAMN备份策略 版 ...

  8. [Swift]LeetCode593. 有效的正方形 | Valid Square

    Given the coordinates of four points in 2D space, return whether the four points could construct a s ...

  9. java 运算符的优先级比较

    口诀:淡云一笔安洛三福 单目>算数运算符>移位>比较>按位>逻辑>三目>赋值 单目运算符:+,-,++,-- 算数运算符:+,-,*,/,% 移位运算符:&l ...

  10. windows下python操作mysql模块安装

    百度教程说安装 pip install mysqldb 这在我的电脑上安装失败: Could not find a version that satisfies the requirement mys ...