关于CSS3选择器的详细介绍及用法总结

CSS3 新增 了很多强大的选择器 它可以让我们少写一些 js 事件 脚本 我们先来看看各个版本的选择器有哪些 注： ele代表element元素 attr代表attribute 属性 ，val代表value属性值 :xxx都属于伪 类选择器 ，::xxx都属于伪 元素选择器 有名字的选择器我尽量细分了 CCS1选择器 选择器类型示例说明.class类选择器.demo选择所有class包含demo的元素#idID选择器#unique选择所有id是unique的元素ele元素选择器p选择所有p元素ele,ele并列选择器h1,h2选择所有h1元素和h2元素ele ele后代选择器p p选择p元素内的所有p元素:link伪类选择器a:link选择未访问链接:visited伪类选择器a:visited选择访问过链接:active伪类选择器a:active选择活动链接:hover伪类选择器a:hover选择鼠标悬浮链接::first-letter首字母选择器p:first-letter选择每一个p元素的第一个字母::first-line首行选择器p:first-line选择每一个p元素的第一行 CSS1版本有我们最常使用的经典选择器 ::first-letter和::first-line好像很少用 CSS2中，他俩只能应用在段落之类的块级元素， 超链接 等行内元素就不能用了 CSS2.1中，：first-letter可以应用所有元素 但是他们可以使用的属性还是有限制的 这里就不列出来了，毕竟不常用 链接的伪类选择器（锚伪类）我们通常这样用 link-visited-hover-active（LVHA） 是推荐的顺序，不会覆盖产生冲突 也很好记“绿化LVHuA” CSS2选择器 选择器类型示例说明*通配选择器*选择所有元素ele>ele直接子元素选择器p>p选择父级是p元素的p元素ele+ele相邻兄弟元素选择器p+p选择紧挨着p元素之后的一个p元素[attr]属性选择器[target]选择带有target属性的元素[attr=val]属性选择器[target=_blank]选择有target属性并且属性值是_blank的元素[attr~=val]属性选择器[title~=demo]选择有title属性并且包含单词”demo”的元素[attr|=language]属性选择器[lang|=en]选择lang属性的起始值为EN的元素:focus焦点选择器input:focus选择具有焦点的input元素:first-child首子级选择器p:first-child选择p元素是其父级的第一个子级的元素::before伪元素选择器p::before在p元素之前插入内容::after伪元素选择器p::after在p元素之后插入内容:lang(language)伪类选择器p:lang(it)选择lang属性的起始值是it的p元素 这里需要注意的有p+p相邻兄弟元素选择器 选择的是紧挨着p元素后的一个p元素， 发现一些网站和书上写的都是所有p元素，但我验证了一下发现好像不对 立即学习 “ 前端免费学习笔记（深入） ”； title~demo是说title属性包含demo这个词，属性值之间用空格分隔的单词 像这样 是可以选中的 但是 就不能够选中 语言的选择器不常用过就不说了 ::before和::after伪元素选择器要想添加内容，需要使用content属性 我们用after的时候很多时候是为了 清除浮动 至于为什么就不是今天讨论的范畴了(￣_,￣ ) 伪类与伪元素 伪元素选择器写成伪类单冒号的形式没什么问题 但是伪类选择器使用双冒号就不能选择元素了 这里说一下 伪类 和 伪元素 的区别 伪类我的理解是元素达到一种 状态 状态存在，改变样式；状态消失，样式消失 伪元素应该说是操作元素的特定内容 实在分不清都写成单冒号的形式就好了 CSS3选择器 敲这么多终于到关键地方了 CSS3增加了很多强大的选择器，以伪劣选择器为主 CSS1和CSS2版本的选择器加起来都没它多 我们一起来看一下 选择器类别示例说明ele~ele后兄弟元素选择器p~p选择p元素之后的所有p元素[attr^=val]属性选择器a[src^=https]选择src属性值以https开头的元素[attr$=val]属性选择器a[src$=\.pdf]选择src属性值以.pdf结尾的元素[attr*=val]属性选择器a[src*=demo]选择src属性的值包含子字符串demo的元素:first-of-type伪类选择器p:first-of-type选择每个p元素是其父级的第一个p元素:last-of-type伪类选择器p:last-of-type选择每个p元素是其父级的最后一个p元素:only-of-type伪类选择器p:only-of-type选择每个p元素是其父级的唯一p元素:only-child唯一子元素选择器p:only-child选择每个p元素是其父级的唯一子元素:nth-child(n)伪类选择器p:nth-child(2)选择每个p元素是其父级的第二个子元素:nth-last-child(n)伪类选择器p:nth-last-child(2)选择每个p元素的是其父级的倒数第二个子元素:nth-of-type(n)伪类选择器p:nth-of-type(2)选择每个p元素是其父级的第二个p元素:nth-last-of-type(n)伪类选择器p:nth-last-of-type(2)选择每个p元素的是其父级的倒数第二个p元素:last-child伪类选择器p:last-child选择每个p元素是其父级的最后一个子元素:root根元素选择器:root选择文档根元素:empty空标签选择器p:empty选择无任何子元素（包括文本节点）的p元素:target目标元素选择器new:target选择当前活动的#new元素（包含锚名称点击的URL）:enabled伪类选择器input:enabled选择已启用的input元素:disabled伪类选择器input:disabled选择禁用的input元素:checked伪类选择器input:checked选择选中的input元素:not(selector)否定选择器:not(p)选择不是p元素的元素::selection高亮文本选择器::selection匹配元素中被用户选中或处于高亮状态的部分:out-of-range伪类选择器:out-of-range选择值在指定区间之外的input元素:in-range伪类选择器:in-range选择值在指定区间之内的input元素:read-write读写元素选择器:read-write选择可读并且可写的元素:read-only只读元素选择器:read-only选择设置了readonly属性的只读元素:optional伪类选择器:optional选择可选的input元素:required伪类选择器:required选择设置了required属性的元素:valid合法元素选择器:valid选择输入值合法的元素:invalid非法元素选择器:invalid选择输入值非法的元素 属性选择器 [attr^=val]，[attr$=val]，[attr*=val] 这三个属性选择器放在一起记 也很好记，很想我们 正则表达式 中用的开头匹配符^，结尾匹配符$，统配匹配符* 同时还要区别于CSS2中的[attr~=val] 可以把三行都选中，因为它们的class属性都是以“de”开头的 可以选中第二行，因为只有它的class属性是以“o2”结尾的 同样可以选中三行，因为它们class的都包含字符串“em” 不能选中任何行，因为它class中以空格分隔的属性值中没有“de”的属性值 说到这个属性选择器，我还要多说一点 我在 js 0中的示例是这么写的 是因为“.”它不认识，我们需要加“\”转义 不过css中属性选择器也可以写成引号的形式 比如说下面代码时等价的 子元素选择器 下面的一堆什么type、child的选择器都是针对子元素在父元素中的位置的 表格中列出的很详细了 我主要谈谈type、child的区别， 以最简单的:first-child和:first-of-type为例 使用first-child我们发现页面没有变化 这是因为p并不是body元素的第一个子元素 改为first-of-type我们发现第一个p变红了 这是因为它是body元素的子元素中所有p的第一个 CSS3选项动画切换效果 CSS3实现的选项动画切换效果。点击旁边的不同花色选项，可以切换牌面的花色显示。适用浏览器：IE9+、FireFox、Chrome、Safari、Opera。 下载 其他的也是一样的道理，举一反三 根元素选择器 :root这个选择器没什么意思，和你直接使用html一样 空元素选择器 :empty就是选择真正的空元素，内部没有任何子元素，文本节点也不能有 举个例子 目标元素选择器 这个:target选择器还有点意思 写一个例子 这是一个小demo可以利用 js 1在页面中进行跳转 点击链接可以跳转到对应id的元素，并且url链接也发生了改变 此时就会触发:target的样式 我们来试一试，加几行代码 再点击链接 我们发现，跳转的同时，p样式改变了 高亮文本选择器 ::selection是CSS3新增的选择器 它用来匹配突出显示的文本（用鼠标选择文本） 浏览器有默认的样式（背景为蓝色，字体为） 浏览器默认的样式就是相当于这样，我们可以自己修改 否定选择器 :not()这个选择器可以排除某些特定条件的元素 比如说我们可以这样用 这样类属性中有demo的元素就不会变色 CSS小图表 剩下的选择器大部分都是针对input输入标签的 不详细讲了 我们做一个小 js 2，仅仅用CSS3的选择器做一个点击 js 3切换 js 4的小图表 通过点击单选框显示不同的图片 像这样 首先我们需要编写html代码 使用三个radio和三个img元素 然后css部分通过:checked配合条件选择器控制img元素的显示 这样我们就完成了我们的小图表功能 整理了一晚上的选择器，可能会有遗漏的 如果想起来，日后再补吧