一、伪类

CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个:

CSS2.1
:active:向被激活的元素添加样式(激活是指点击鼠标那一下)
:focus:向拥有键盘输入焦点的元素增加样式    
:hover:当鼠标悬浮在元素上方时,向元素增加样式
:link:向未被访问的链接增加样式
:visited:向已被访问的链接增加样式
:first-child:向元素的第一个子元素增加样式
:lang:向带有指定lang属性的元素增加样式

CSS3中的伪类(注意CSS3级别的伪类可能缺乏浏览器支持,可能要准备相应的JS支持):
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled

提示:
1、伪类名称对大小写不敏感。比如:ACTIVE,Active,active都是合法的。
2、l v h a原则。按照 link 、visited、hover、active 的顺序来写。
3、在IE中必须声明<!DOCTYPE>,first-child伪类才会生效
4、伪类后面还可接选择器


 疑问:

对于first-child伪类,看下面的解释:

1、p:first-child 匹配第一个<p>元素选择器匹配作为任何元素的第一个子元素的 p 元素,如果<p>元素不是第一个,则无效。
成功的例子:
html:
  1. <body>
  2. <p>
  3. 哈哈哈
  4. </p>
  5. <p>
  6. <i>AAA</i>
  7. <i>bbb</i>
  8. </p>
  9. <p>
  10. <i>CC</i>
  11. <i>DD</i>
  12. </p>
  13. <p lang="en">呵呵</p>
  14. </body>

css:

  1.   p:first-child{color: yellow;}
效果:
 
其他<p>标签内的元素不改变颜色。

失败的例子:
html:
  1. <body>
  2.         <span></span>
  3. <p>
  4. 哈哈哈
  5. </p>
  6. <p>
  7. <i>AAA</i>
  8. <i>bbb</i>
  9. </p>
  10. <p>
  11. <i>CC</i>
  12. <i>DD</i>
  13. </p>
  14. <p lang="en">呵呵</p>
  15. </body>

css:
  1.     p:first-child{color: yellow;}
效果:
没有一个<p>标签内的颜色改变为黄色,因为没有一个<p>标签是作为它的父元素的第一个元素。



2、p>i:first-child 匹配所有<p>元素的第一个<i>元素 选择器匹配所有 <p> 元素中的第一个 <i> 元素,如果<i>元素不是第一个则无效。
成功的例子:
html:
  1.     <body>
  2. <p>
  3. <span>哈哈哈哈哈</span>
  4. <i>呵呵</i>
  5. 哈哈哈
  6. <i>呵呵</i>
  7. </p>
  8. <p>
  9. <i>AAA</i>
  10. <i>bbb</i>
  11. </p>
  12. <p>
  13. <i>CC</i>
  14. <i>DD</i>
  15. </p>
  16. <p lang="en">呵呵</p>
  17. </body>
css:
  1. p>i:first-child{color: green;}
效果:
,第一个<p>标签内,由于<i>不是第一个子元素,所以不会被选择器选中,颜色不会变成绿色。

 

3、p:first-child i 匹配所有作为第一个子元素<p>中的所有<i>元素 选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素
成功的例子:
html:
  1. <body>
  2. <p>
  3. <span>哈哈哈哈哈</span>
  4. <i>呵呵</i>
  5. 哈哈哈
  6. <i>呵呵</i>
  7. </p>
  8. <p>
  9. <i>AAA</i>
  10. <i>bbb</i>
  11. </p>
  12. <p>
  13. <i>CC</i>
  14. <i>DD</i>
  15. </p>
  16. <p lang="en">呵呵</p>
  17. </body>
css:
  1. p:first-child i{color: red;}
效果:
  其他<p>标签不会被选中,颜色不会变成红色。

对于lang伪类,看下面的例子:
css
  1. p:lang(en){color: red;}
html:
  1. <p lang="en">呵呵</p>
效果:
 

二、伪元素

W3C规范中有4个伪元素:
CSS-1
:first-line 向文本的第一行添加样式
:first-letter 向文本的第一个字母添加特殊样式
CSS-2:
:after 在元素之后添加内容
:before 在元素之前添加内容

提示:
1、CSS3中规定伪元素的写法是要用两个冒号的,比如,::first-line,但是由于一些IE浏览器不支持,所以现在变得既可以用两个冒号,也可以用用一个冒号。
2、另外,:after和:before会在元素中添加内容,具体的方式类似于:
  1. p:after{
  2.     content:"内容";
  3. }
3、同一个标签可以使用多重伪元素,比如:
  1. p:first-line{
  2.  color:red;
  3. }
  4. p:first-letter{
  5.  color:yellow;
  6. }
其中,如果同时出现first-line,first-letter,并且相互有冲突的属性,那么会按照first-letter里面的属性来设置冲突的那些属性,而不是看其出现的先后顺序。例如上例中,第一行的第一个字母(中文是第一个字)的颜色应该为黄色。


三、伪类和伪元素的区别

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

2、伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

3、伪元素在一个选择器中只能出现一次,并且只能出现在末尾。



CSS伪类和伪元素的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

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

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

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

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

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

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

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

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

  6. CSS的伪类和伪元素

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

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

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

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

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

  9. 【从0到1学Web前端】CSS伪类和伪元素

    1.CSS中的伪类 CSS 伪类用于向某些选择器加入特殊的效果. 语法: selector : pseudo-class {property: value} CSS 类也可与伪类搭配使用 select ...

随机推荐

  1. Dijkstra的双栈算术表达式的求值算法

    例如需要计算 ( 1 + (  ( 2 + 3 ) * ( 4 * 5 ) ) ) 我们以字符串的形式输入该表达式,利用两个栈来完成这个操作,其中一个栈保存运算符,一个栈保存操作数,过程是这样的: 表 ...

  2. 那些年我们一起过的JS闭包,作用域,this,让我们一起划上完美的句号。

    之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...

  3. swift基础一

    // swift中导入类库使用import,不再使用<>和"" import Foundation // 输出 print("Hello, World!&qu ...

  4. NS2仿真:公交车移动周期模型及性能分析

    NS2仿真实验报告3 实验名称:公交车移动周期模型及性能分析 实验日期:2015年3月16日~2015年3月21日 实验报告日期:2015年3月22日 一.实验环境(网络平台,操作系统,网络拓扑图) ...

  5. WdatePicker()时间控制方式(转载+原创)

     控制时间在制定范围内: <input class="wzsrk" name="startDateStr" id="startDateStr ...

  6. PYTHON黑帽编程 4.1 SNIFFER(嗅探器)之数据捕获--补充

    荒废了一个多月了,重新捡起来,手生了不少.发现在<4.1下>的文章里没有 提到pcap库,实在是不应该. 在网络数据分析的工具中,tcpdump绝对是大名鼎鼎,tcpdump底层是libp ...

  7. leetcode python 011

    ####给定n个非负整数a1,a2,...,an,其中每个表示坐标(i,ai)处的点.##绘制n条垂直线,使得线i的两个端点位于(i,ai)和(i,0).##找到两条线,它们与x轴一起形成一个容器,这 ...

  8. 用RIPv2实现网络区域的互通

    1.动态路由的分类: DV协议:距离矢量协议 距离矢量:路由器只能够知道邻居路由的信息 LS协议:链路状态协议 链路状态:路由器能够知道所在协议内的所有信息 RIP协议的全程是:路由信息协议(DV协议 ...

  9. Python 安装 lxml 插件

    1.下载 lxml 地址:https://pypi.python.org/pypi/lxml/3.8.0#downloads 我用的是python 3.6,我下载了  lxml-3.8.0-cp36- ...

  10. main.cpp

    /*main.cpp * *The starting point of the network simulator *-Include all network header files *-initi ...