观速讯丨CSS3选择器总结（表格）

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

观速讯丨CSS3选择器总结（表格）

2023-01-19 06:08:20 来源：博客园

CSS3选择器总结（表格）

(资料图片仅供参考)

html标签有2种关系：包含关系和并列关系；

CSS3选择器分类：基本选择器、组合选择器、属性选择器、伪类选择器；

伪类选择器分类：动态伪类、结构伪类、状态伪类、目标伪类；

	名称	含义	举例
基本选择器	标签选择器	按照标签名称进行定位；将样式应用于特定标签；	p{font-size:12px;} h1{font-color:red;}
	类选择器 .	用点.表示类选择器；后面跟一个自定义的类名class=“name”；将样式应用于类名相同的标签；
	ID选择器#	#表示id选择器；后跟一个自定义id；将样式应用于id值匹配的标签；	#myid{font-size:12px;}
	通配选择器*	表示通配选择器，后面什么都不用跟；表示将样式应用于所有标签；	{margin:0;} {padding:10;}
组合选择器	包含选择器后代选择器	空格表示包含选择器，将某个选择器和另一个选择器用空格隔开，表示选择第一个选择器内的所有的第二个选择器；使用空格作为结合符。与子元素选择器相比，>作用于元素的第一代后代，空格作用于元素的所有后代。包含选择器不仅仅作用于儿子辈，孙子穷孙子，只要是辈包含的标签，全部适用；	div span{font-size:18px;} 表示div标签中包含的所有span标签，字体全都设置为18px； #main p{font-size:14px;} 表示id为main的标签中的所有p标签字体，全都设置为14px；
	子选择器> 儿子选择器	用大于符号(>)（子结合符），用于选择指定标签元素的第一代子元素；如果是孙子辈的标签，则不会匹配，只匹配直接包含的子标签；可以匹配所有的第一代子标签；	div>span{font-size:14px;} 匹配div标签下的第一代span标签，而不匹配孙子辈的标签；可以匹配所有子辈标签；
	相邻选择器+	第一个选择器指定前置元素，第二个选择器指定其后的第一个同级标签；兄弟关系不能互换，兄在前，弟在后；不管相邻的兄弟被嵌套了多少层，只要满足相邻的兄弟关系，就可以匹配；	p+h3{background:red;} 表示p后面紧跟着并列关系的h3，才会匹配，再往后的h3就不会匹配了；兄在前，弟在后：p前面的h3则不会匹配；
	兄弟选择器~	第一个选择器指定前置元素，第二个选择器指定其后的所有同级标签；兄弟关系不能互换，兄在前，弟在后；兄弟选择器匹配其后的所有弟弟，相邻选择器只匹配其后相邻的弟弟；	p~h3{background:red;} 表示p后面的所有并列关系的h3，全都匹配；兄在前，弟在后：p前面的h3则不会匹配；
	分组选择器，	相当于多个选择器同时使用某种样式；相当于集体声明；	h1,h2,h3,h4,h5{background:green;} 表示h1到h6的所有标签背景色都是绿色；
属性选择器	E[attr]	E表示标签名称； attr表示属性名称；匹配含有attr属性名称的E标签；	.nav a[id]{background=red;} .nav表示class=“nav”的标签；空格表示包含关系，也就是.nav所包含的各级所有匹配项； a表示a标签； [id]表示a标签中有id属性； a[id][href]表示同时拥有id属性和href属性的a标签；
	E[attr=”val”]	标签名称为E，并且含有名称为attr的属性，并且该属性的值为val；	p[id=”first”]表示拥有id属性，并且id属性的值等于first的p标签；
	E[attr~=”val”]	标签名称为E，并且含有名称为attr的属性，并且该属性的值是一个列表（空格隔开），这个列表中含有val值；	a[title~=”good”]就会匹配上面的a标签，因为该按标签的title属性是一个列表，列表中有5个元素，分别是i、am、a、good、boy，第四个元素正好匹配；
	E[attr^=”val”]	标签名称为E，并且含有名称为attr的属性，并且该属性的值以val开头；	a[href^=”https”]将匹配链接到https网址的所有a标签，而不会匹配链接到http网址的a标签；
	E[attr$=”val”]	标签名称为E，并且含有名称为attr的属性，并且该属性的值以val结尾；	a[href$=”png”]将匹配链接到png图片的所有a标签，而链接到jpg图片的链接和链接到网页的链接将不会匹配；
	E[attr*=”val”]	标签名称为E，并且含有名称为attr的属性，并且该属性的值包含val；	a[href*=”baidu.com”]将匹配链接中含有baidu.com子字符串的所有a标签；
	E[attr\|=”val”]	标签名称为E，并且含有名称为attr的属性，并且该属性的值以val开头或者以val-开头；	a[lang\|=”zh”]将匹配lang属性值以zh开头或者以zh-开头的的所有a标签；
伪类选择器	动态伪类（鼠标事件）	动态伪类匹配页面的交互动作事件；例如鼠标点击事件、鼠标悬停事件等；	a:link{color:gray;}没有被访问的链接前景色为灰色； a:visited{color:yellow;}访问后 a:hover{color:green;}悬停 a:active{color:gray;}点击时
	结构伪类（索引查找）	:first-child第一个子元素 :last-child最后一个子元素 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-of-type第一个子元素 :last-of-type最后一个子元素 :only-child唯一子元素 :only-of-type唯一子元素 :empty元素里面没有任何内容 .post p:only-child表示，如果post只有这一个子元素p，就改变post的样式； .post p:only-type表示，如果post中的p类型元素只有一个，就改变post的样式；	n表示从0开始的整数； li:nth-child(n)所有li元素； li:nth-child(3)第三个li元素； li:nth-child(2n)下标为偶数的li元素；等价于li:nth-child(even) li:nth-child(n+5)表示从第五个开始向后选择所有li元素； li:nth-child(-n+5)表示选择下标为5/4/3/2/1/0的元素； li:nth-child(3n+1)表示选择下标为1/4/7/10...的元素； nth-last-child表示从后往前选； p:nth-of-type(even)表示每隔一个p匹配一次样式；
	状态伪类（控件状态）	:enabled可用状态的元素 :disabled禁用状态的元素 :checked选中状态的元素	匹配input:enabled 匹配input:disabled 匹配input:checked
	目标伪类（锚点链接）	目标伪类的形式为E:target，它表示当选择匹配E的所有元素，并且匹配元素被相关URL指向；只有当URL指向该元素时，样式才生效；	div:target{background:red;} 在浏览器中输入URL并附加#red，以锚点方式链接到时，该元素会立即显示红色背景；

关键词：不能互换包含关系