Pesudo Class & Pesudo Element

pseudo [英]['sju:dəʊ] [美]['su:doʊ]

说明

无论是伪类还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。http://www.w3.org/TR/selectors/

伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有“段落的第一行”之类的选择器。

CSS Selector Level 3 为了区分这两者的混淆,而特意用冒号加以区分:
- 伪类用一个冒号表示 :first-child
- 伪元素则使用两个冒号表示 ::first-line

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

内容来自:http://www.swordair.com/blog/2012/12/606/

标准中的伪类和伪元素

伪类:
- 动态伪类【 :link , :visited 、 :hover , :active , :focus 】
- 目标伪类【 :target 】
- 语言伪类【 :lang 】
- UI元素状态伪类【 :enabled , :disabled 、 :checked 】
- 结构伪类【 :root , :nth-child() , :nth-last-child() , :nth-of-type() , :nth-last-of-type() , :first-child , :last-child , :first-of-type , :last-of-type , :only-child:only-of-type , :empty 】
- 否定伪类【 :not() 】

伪元素:
- ::first-line
- ::first-letter
- ::before , ::after
- ::selection

webkit私有伪类和伪元素

参见:http://stackoverflow.com/questions/7492568/what-are-the-well-known-webkit-specific-pseudo-elements

:link , :visited 、 :hover , :active , :focus

链接滑过变色

文本框聚集变色

:target

target实现Tab切换

content-1
content-2
content-3
:enabled , :disabled 、 :checked

checked实现Tab切换

content-1
content-2
content-3

选择器组合

E F 元素E的所有F子元素 E > F 元素E的第一代F子元素 E + F 元素E的相邻F兄弟元素 E ~ F 元素E的所有F兄弟元素
结构伪类
:root 根元素,一般指html :nth-child() 选择某个元素的一个或多个特定的子元素 :nth-last-child() 选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算 :nth-of-type() 选择指定的元素 :nth-last-of-type() 选择指定的元素,从元素的最后一个开始计算 :fist-child 选择某个元素的第一个子元素 :last-child 选择某个元素的最后一个子元素 :first-of-type 选择一个上级元素下的第一个同类子元素 :last-of-type 选择一个上级元素的最后一个同类子元素 :only-child 选择的元素是它的父元素的唯一一个了元素 :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素 :empty 选择的元素里面没有任何内容
::before , ::after

生成固定文字内容

点击这个链接转到手机搜狐

生成元素属性

点击这个链接转到手机搜狐

图片替换文字

点击这个链接转到手机搜狐

用计数器创建号码内容

content属性说明

取值: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit 自动增长的数值是由 css 的两个属性控制的,他们是 counter-reset 和 counter-increment 。计数器由这些属性定义,然后用 counter() 和 counters() 方法获取内容属性。 counter-reset 计数器重置属性可以包含一个或多个计数器的名字(例如“标识符”),后面可以跟一个可选的整数参数。通过counter-increment属性设置增长的整数值,可以作用在任何元素。他的默认值是 0,负值是容许的。 counter-increment 计数器增量属性是类似的,他们基本的不同是这个增加一个计数器,其默认增量是1,负值是容许的。

用计数器创建号码内容 - 负数计数器结合正数计数器

用计数器创建号码内容 - 嵌套、自我嵌套

用计数器创建号码内容 - 计数器的样式

默认计数器是用十进制格式化的。可是,用 list-style-type 也可以修改计数器的样式。用默认语法 counter(name) (没有样式)或 counter(name, 'list-style-type') 修改默认格式。实际中,推荐以下样式: decimal decimal-leading-zero lower-roman upper-roman lower-greek lower-latin upper-latin lower-alpha upper-alpha 不要忘记我们正在跟数字系统打交道。也要记住规范没有定义超出字母排序的字母系统要如何显示。例如,超过小写拉丁文的26个字母后是没有定义的。所以,对于长列表而言,推荐用数字做计数器:

为多语言内容插入正确的引号

It’s only work if somebody makes you do it.

Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.

欢迎来到上海,欢迎参观世博会!

代码来自:http://www.zhangxinxu.com/wordpress/?p=739

quotes属性说明

语法:quotes:none | [<string> <string>]+ 取值: none:content属性的open-quote和close-quote值将不会生成任何标记 <string>:定义content属性的open-quote和close-quote值的标记,2个为一组

before/after伪元素与transition/animation

before/after伪元素、box-shadow与transition/animation

美妙案例

::selection
只能设置被选择文本的两个属性: backgroundcolor