【前端从0开始】CSS3新增选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端从0开始】CSS3新增选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

选择器	例子	例子描述	CSS
`.class`	`.intro`	选择 `class="intro"` 的所有元素。	1
`#id`	`#firstname`	选择 `id="firstname"` 的所有元素。	1
`*`	`*`	选择所有元素。	2
`element`	`p`	选择所有 `<p>` 元素。	1
`element,element`	`div,p`	选择所有 `<div>` 和 `<p>` 元素。	1
`element element`	`div p`	选择 `<div>` 元素内的所有 `<p>` 元素。	1
`element>element`	`div>p`	选择父元素为 `<div>` 的所有 `<p>` 元素。	2
`element+element`	`div+p`	选择紧接在 `<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	选择每个 `<p>` 元素的首字母。
:first-line	p:first-line	选择每个 `<p>` 元素的首行。（加边框不行，字号可以）
:first-child	p:first-child	选择属于父元素的第一个子元素的每个`<p>`元素。
:before	p:before	在每个 `<p>` 元素的内容之前插入内容。
:after	p:after	在每个元素的内容之后插入内容。文章来源地址https://www.toymoban.com/news/detail-666417.html