CSS3选择器介绍及用法总结

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

CSS3新增了很多强大的选择器
它可以让我们少写一些js事件脚本
我们先来看看各个版本的选择器有哪些
注：
ele代表element元素
attr代表attribute属性，val代表value属性值
:xxx都属于伪类选择器，::xxx都属于伪元素选择器
有名字的选择器我尽量细分了
#CCS1选择器#

选择器	类型	示例	说明
.class	类选择器	.demo	选择所有class包含demo的元素
#id	ID选择器	#unique	选择所有id是unique的元素
ele	元素选择器	div	选择所有div元素
ele,ele	并列选择器	h1,h2	选择所有h1元素和h2元素
ele ele	后代选择器	div p	选择div元素内的所有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可以应用所有元素
但是他们可以使用的属性还是有限制的
这里就不列出来了，毕竟不常用

---

链接的伪类选择器（锚伪类）我们通常这样用

a:link {
   color: blue;}             /*静态伪类：未访问链接时蓝色*/
a:visited {
   color: purple;}        /*静态伪类：访问过的链接变为紫色*/
a:hover {
   color: red;}             /*动态伪类：鼠标悬浮在链接上变为红色*/
a:active {
   color: orange;}		  /*动态伪类：鼠标按下链接时变为橘黄色*/

link-visited-hover-active（LVHA） 是推荐的顺序，不会覆盖产生冲突
也很好记“绿化LVHuA”

#CSS2选择器#

选择器	类型	示例	说明
*	通配选择器	*	选择所有元素
ele>ele	直接子元素选择器	div>p	选择父级是div元素的p元素
ele+ele	相邻兄弟元素选择器	div+p	选择紧挨着div元素之后的一个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元素

---

这里需要注意的有div+p相邻兄弟元素选择器
选择的是紧挨着div元素后的一个p元素，
发现一些网站和书上写的都是所有p元素，但我验证了一下发现好像不对

title~demo是说title属性包含demo这个词，属性值之间用空格分隔的单词
像这样<img title="demo demo1 demo2"></img>是可以选中的
但是<img title="demo1 demo2"></img>就不能够选中

语言的选择器不常用过就不说了

::before和::after伪元素选择器要想添加内容，需要使用content属性

p::before {
   
    content: "123";
}

我们用after的时候很多时候是为了清除浮动

div::after {
   
    content: "";
    display: block;
    clear: both;
}

至于为什么就不是今天讨论的范畴了(￣_,￣ )

##伪类与伪元素##
伪元素选择器写成伪类单冒号的形式没什么问题
但是伪类选择器使用双冒号就不能选择元素了

这里说一下伪类和伪元素的区别
伪类我的理解是元素达到一种状态
状态存在，改变样式；状态消失，样式消失
伪元素应该说是操作元素的特定内容
实在分不清都写成单冒号的形式就好了
#CSS3选择器#
敲这么多终于到关键地方了
CSS3增加了很多强大的选择器，以伪劣选择器为主
CSS1和CSS2版本的选择器加起来都没它多
我们一起来看一下

选择器	类别	示例	说明
ele~ele	后兄弟元素选择器	div~p	选择div元素之后的所有p元素
[attr^=val]	属性选择器	a[src^=https]	选择src属性值以https开头的元素
[attr$=val]	属性选择器	a[src$=\.pdf]	选择src属性值以.pdf结尾的元素
[attr*=val]	属性选择器	a[src*=