【前端从0开始】CSS3新增选择器

CSS3新增选择器

1 什么是CSS3

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效（阴影）、多栏布局（display:flex）、2D3D和动画等模块

2 CSS选择器

选择器	例子	例子描述	CSS
.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 元素。	1
element,element	div,p	选择所有 和 元素。	1
element element	div p	选择 元素内的所有 元素。	1
element>element	div>p	选择父元素为 的所有 元素。	2
element+element	div+p	选择紧接在 元素后的所有 元素。	2
[attribute]	[target]	选择带有 target 属性的所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。注意：title= ”flower red” 不能使用了	2
[attribute|=value]	[class|=box]	选择 class 属性值以 “box” 开头(后面如果有字符，必须为-)的所有元素。	2

伪类选择器	示例	描述
:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接。
:focus	input:focus	选择获得焦点的 input 元素。（IE8及以上才支持）
:first-letter	p:first-letter	选择每个 元素的首字母。
:first-line	p:first-line	选择每个 元素的首行。（加边框不行，字号可以）
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素。
:before	p:before	在每个 元素的内容之前插入内容。
:after	p:after	在每个 元素的内容之后插入内容。