1概述1.1前言选择器是CSS的核心组件。本文基于W3C的SelectorsLevel4规范，总结了Level1-Level4中的大部分选择器，并做了简单的语法说明和示例演示。希望对程序员有所帮助。2元素选择器2.1类型选择器-h1类型选择器也可以称为标签名选择器，它会在文档中选择该类型元素的一个实例。h1{color:red;}将文档中元素类型h1的颜色设置为红色。参见示例程序2.2通用选择器-*通用选择器是一种特殊类型的选择器，它代表任何元素类型的元素。*{color:red;}将文档中所有元素的颜色设置为红色。3属性选择器3.1属性存在选择器-[name]h1[name]{color:red;}在元素h1中选择具有属性name的元素。见示例程序3.2属性值选择器3.2.1精确匹配-[title='cool']h1[title='cool']{color:red;}匹配包含属性title且属性值为cool的元素h1。见示例程序3.2.2ContainsMatch-[title|='cool']h1[title~='cool']{color:red;}匹配包含属性title且属性值包含cool元素的元素h1。查看示例程序3.2.3头部匹配-[title^='cool']h1[title|='cool']{color:red;}匹配包含属性title的元素h1，属性值为cool或元素以cool-开头的元素。查看示例程序3.3属性值子串选择器3.3.1头匹配-[title^='cool']h1[title^='cool']{color:red;}匹配元素h1包含属性title，以及value字符串以cool开头的属性Elements。查看示例程序3.3.2TailMatch-[title$='cool']h1[title$='cool']{color:red;}匹配包含属性标题和属性值字符串以cool结尾的元素h1。查看示例程序3.3.3部分匹配-[title*='cool']h1[title*='cool']{color:red;}包含属性标题和属性值字符串的匹配元素h1包含很酷的子字符串元素。参见示例程序3.4ClassSelector-.class.red{color:red;}匹配文档中具有class属性red的元素，并将其颜色设置为红色。见示例程序3.5ID选择器-#id#title{color:red;}匹配文档中id属性为title的元素，并将其颜色设置为红色。查看示例程序4语言学伪类4.1方向性伪类：dirdir()主要用于匹配满足一定方向性的元素，如：dir(ltr)和:dir(rtl)，其中ltr是left的缩写toright，表示从左到右，rtl是righttoleft，表示从右到左。:dir(ltr){color:red;}匹配文本方向为从左到右的元素。参见示例程序4.2语言伪类：lang:lang(fr){color:red;}匹配语言为法语的元素并将其颜色设置为红色。查看示例程序5Location伪类5.1Hyperlink伪类：any-link匹配、、等具有href属性的元素。:any-link{color:red;}匹配任何超链接并将其颜色设置为红色。查看示例程序5.2超链接伪类：link:link{color:red;}匹配未访问的超链接并将其颜色设置为红色。5.3超链接伪类：visited:visited{color:blue;}匹配已访问的超链接，并将其颜色设置为蓝色。参见示例程序5.4超链接伪类：local-link:local-link{color:red;}匹配本地超链接并设置其颜色为红色。5.5Target伪类：target三十课
程序员笔记
程序员笔记本2:target{color:red;}点击html代码中的内部链接，targetobjectid为content的p元素的颜色会变为红色。6用户行为伪类6.1用户行为伪类：hover用户悬停在指定元素上时，匹配该元素。:hover{color:red;}当用户将鼠标悬停在某个元素上时，匹配该元素并将其颜色设置为红色。参见示例程序6.2用户行为伪类：active:active{background:red;}当特定元素处于活动状态时，将元素背景色设置为红色。参见示例程序6.3用户行为伪类：focus:focus{background:red;}当特定元素获得焦点时，将元素背景色设置为红色。参见示例程序6.4用户行为伪类：focus-withindiv:focus-within{border:1pxsolidblue;}当div中的子元素获得输入焦点时，将div元素的border设置为蓝色边框1像素的值。查看示例程序7Timeline伪类7.1Timeline伪类:currenttimeline伪类常用于文档的语音渲染或字幕显示。:current(p){color:red;}上述规则定义了当前语音渲染段落的颜色为红色。7.2时间伪类：past:past(p){color:red;}上述规则定义了完整语音渲染的段落颜色为蓝色。7.3时间伪类：future:future(p){color:yellow;}以上规则定义了没有语音渲染的段落颜色为黄色。8资源状态伪类8.1资源状态伪类：playing:playing{border:1pxsolidred;}匹配当前播放状态的元素，并为其添加一个1像素的红色边框。8.2资源状态伪类：paused:playing{border:1pxsolidgray;}匹配当前播放状态的元素，并为其添加1像素的灰色边框。9输入伪类9.1输入状态控制伪类：enabled:enabled{color:red;}匹配处于启用状态的元素，并将其颜色设置为红色。9.2输入状态控制伪类：disabled:disabled{color:yellow;}匹配处于disabled状态的元素，并设置其颜色为黄色。参见示例程序9.3只读伪类：read-only:read-only{color:red;}匹配只读状态的元素，并设置其颜色为红色。9.4读写伪类：read-write:read-write{color:yellow;}匹配读写状态的元素，并设置其颜色为黄色。参见示例程序9.5伪类：placeholder-shown:placeholder-shown{background:red;}选择显示占位符的元素，设置其背景色为红色。见示例程序9.6DefaultItem伪类：default:default{color:red;}匹配默认元素并将其颜色设置为红色。参见示例程序9.7Checkeditem伪类：checked:checked{height:4em;}匹配checked元素并设置其高度为4em。见示例程序9.8不确定值伪类：indeterminate不确定值伪类：indeterminate适用于值处于不确定状态的元素。示例：无线电元素组是不确定的，除非它最初被选中。:indeterminate{height:4em;}匹配不确定元素并将高度设置为4em。见示例程序9.9空值伪类:blank空值伪类:blank用于匹配输入值为空的输入框，如textarea或inputbox。:blank{background:red;}目前这个伪类兼容性不好。9.10合规验证伪类：valid:valid{color:red;}匹配具有合法输入值的元素并将其颜色设置为红色。9.11合规验证伪类：invalid:valid{color:blue;}匹配具有无效输入值的元素并将其颜色设置为蓝色。参见示例程序9.12Range伪类：in-range:in-range{color:red;}匹配输入值在定义范围内的元素，并将其颜色设置为红色。9.13范围伪类：out-of-range:out-of-range{color:blue;}匹配输入值不在定义范围内的元素，并将其颜色设置为蓝色。参见示例程序9.14Required伪类：required:required{color:red;}匹配按要求定义的元素并将其颜色设置为红色。9.15Optional伪类：optional:optional{color:blue;}匹配定义为可选的元素并将其颜色设置为蓝色。查看示例程序10树结构伪类10.1根节点伪类:root伪类:root表示文档的根元素。例如，在DOM文档中，伪类:root匹配Document对象的根元素。在HTML中，它表示html元素。:root{color:red;}匹配文档根元素并将其颜色定义为红色。参见示例程序10.2Empty伪类：empty:empty{color:red;}匹配空元素并将它们的颜色设置为红色。见示例程序10.3元素索引伪类：nth-childp:nth-child(3n+1){color:red;}匹配第1、4、7、10个p元素，并设置其颜色为红色。查看示例程序10.4元素索引的伪类：nth-??last-childp:nth-child(3n+1){color:red;}匹配最下面的1,4,7,10等p个元素，并设置它们的颜色变红。参见示例程序10.5第一元素伪类：first-childp:first-child{color:red;}匹配第一个p元素并将其颜色设置为红色。参见示例程序10.6最后一个元素伪类：last-childp:last-child{color:red;}匹配最后一个p元素并将其颜色设置为红色。见示例程序10.7唯一子元素伪类：only-childp:only-child{color:red;}匹配其父元素仅包含唯一子元素的元素p并将其颜色设置为红色。见示例程序10.8类型索引伪类：nth-of-typep:nth-of-type(3n+1){color:red;}匹配类型p的第1、4、7、10个索引位置的元素，并将其颜色设置为红色。查看示例程序10.9类型索引伪类：nth-??last-of-typep:nth-last-of-type(3n+1){color:red;}匹配类型为p的最后1st、4th、7th、10th等索引位置处的元素，并设置其颜色为红色。参见示例程序10.10类型为第一个元素的伪类：first-of-typep:first-of-type{color:red;}匹配p类型的第一个元素并将其颜色设置为红色。参见示例程序10.11last-of-type元素的伪类：last-of-typep:last-of-type{color:red;}匹配类型p的最后一个元素并将颜色设置为红色。见示例程序10.12唯一类型元素伪类：only-of-typep:only-of-type{color:red;}匹配只包含p类型子元素的父元素，并将它们的颜色设置为红色。查看示例程序11逻辑组合选择器11.1分组选择器h1{color:red}h2{color:red}h3{color:red}h4{color:red}使用分组选择器，上述CSS规则可以简写成如下形式。h1,h2,h3,h4{color:red}以上两种写法效果一样。11.2逻辑组合伪类:is伪类:is()是一个以多个选择器为参数并匹配其参数所代表的元素的函数。目前兼容性较差。*:is(:hover,:focus){color:red;}匹配具有伪类hover和focus的元素，并将它们的颜色设置为红色。11.3逻辑组合伪类:not否定逻辑组合伪类:not()是一个以多个选择器为参数，匹配不在其参数列表中的元素的函数。目前兼容性较差。button:not([DISABLED]){color:red;}匹配不包含DISABLED属性并将其颜色设置为红色的按钮元素。11.4逻辑组合伪类：目前兼容性较差。a:has(>img){border:1pxsolidred;}匹配包含img子元素的超链接并将其边框设置为1pxsolidred。12组合选择器12.1后代选择器h1em{color:red;}匹配h1后代的em元素并将其颜色设置为红色。参见示例程序12.2子元素选择器->h1>em{color:red;}匹配h1的子元素em，并设置其颜色为红色。请参见示例程序12.3相邻兄弟选择器-+h1+h2{color:red;}匹配h1的相邻兄弟元素h2并将其颜色设置为红色。参见示例程序12.4Siblingselector-~h1~h2{color:red;}匹配h1后面的兄弟节点h2，并设置其颜色为红色。查看示例程序13完13.1ReferencesW3CWorkingDraft:SelectorsLevel4-21November2018W3scool:CSSSelectorReferenceManual菜鸟教程：CSSSelectorMDN:CSSSelectors13.2结论摘取部分CSS选择器内容编写而成。由于本人水平有限，理解和翻译难免有偏差和错误。请程序员朋友指正！本文部分选择器兼容性不是很好，只能作为学习储备，不适合在实际产品中使用。费力原创不易，转载请务必注明出处来自【三十课】！
