面试题：CSS选择器有哪几种类型？答：CSS选择器的种类有：类型选择器、通用选择器、属性选择器、类选择器、ID选择器、伪类选择器、伪元素选择器。在选择器之前，可以使用逗号“,”进行分组，也可以使用空格、加号“+”、右尖括号“>”和波浪号“~”组合。这篇文章的内容比较简单和基础。主要介绍选择器相关的一些内容。本来打算把selector和selectorweight计算相关的内容放在一起，但是这样太长了，不好读，所以这部分内容会拆分成两部分，这一部分讲选择器，下一部分讲选择器权重的计算。文末放了一张图，算是权重计算的介绍。选择器在CSS中，选择器用于指定我们要在网页上设置格式的HTML元素。CSS为我们提供了多种选择器方法，让我们可以精细地格式化我们选择的元素的样式；在使用中，CSS选择器不区分大小写DIV{font-size:18px}和div{font-size:18px}具有相同的效果。选择器组（列表）如果有多个选择器使用相同的样式，可以使用逗号“,”将这些单独的选择器组合成一个“选择器组”或“选择器列表”，例如：//同一个样式选择器h1{font-family:'Pingfang'}h2{font-family:'Pingfang'}h3{font-family:'Pingfang'}//用逗号分隔合成选择器组h1,h2,h3{font-family:'Pingfang'}PS：在选择器组中，如果其中一个选择器无效，则整个选择器组都无效，例如：h1,..h2,.h3{font-family:'Pingfang'}selector..h2无效，CSS会按照规则删除整个选择器组简单选择器简单选择器包括：类型选择器、通用选择器、属性选择器、类选择器、ID选择器和伪类选择器。作为前端开发者，我们一定用过这些简单的选择器，这里简单说明一下。类型选择器为给定的节点名称选择所有匹配的HTML元素。语法：elementname示例：//匹配所有h1标签h1{font-size:18px}//匹配所有输入标签input{font-size:18px}通用选择器选择所有HTML元素，使用星号(*)表示语法：*示例：//将所有元素的内外边距设置为0*{padding:0;margin:0;}//匹配div标签的所有子元素div*{font-size:18px}属性选择过滤器根据给定的属性选择所有匹配的元素语法：[attr][attr=value][attr~=value][attr!=value][attr^=value][attr$=value][attr*=value]示例：[attr]表示具有attr属性的元素，不管该属性的值是多少。//匹配所有具有title属性的a元素//匹配所有target属性值为空的a元素恰恰是“价值”。//匹配class属性值包含special的元素“值-”作为前缀。//匹配所有lang属性值为en或以en为前缀的a元素a[lang|="en"]{color:yellow;}[attr^=value]表示它有attr属性，属性值为以“值”为前缀的属性以“”开头的元素。如果“value”是空字符串，则选择器不代表任何内容。//匹配HTML元素对象，其属性类型值以image/元素对象开头[type^="image/"]{color:yellow;}[attr$=value]表示它有attr属性，属性value在属性末尾加上“value”作为后缀。如果“value”是空字符串，则选择器不代表任何内容。//匹配href值以.html结尾的a元素a[href$=".html"]{color:yellow;}[attr*=value]表示attr属性值至少包含子串"的元素的价值”。如果“value”是空字符串，则选择器不代表任何内容。//匹配title值为hello的p元素p[title*="hello"]{color:yellow;}ID选择器根据id属性选择一个匹配的元素。每个ID属性应该是唯一的语法：#idname示例：//匹配ID值为chapter1的元素#chapter1{font-size:30px;}CLASS选择器根据给定的类属性的值选择所有匹配的元素。语法：.classname示例：//匹配类名为header.header{font-size:30px;}的元素伪类：伪选择器支持根据文档树中不包含的状态信息选择元素。语法：双引号":"例子：//匹配类名为ext且被访问过的a元素a.ext:visited{font-size:30px;}伪类选择器大致可以分为：动态伪类类、目标伪类、语言伪类、UI元素状态伪类、结构伪类、空白伪类、否定伪类。参考下图：伪元素选择器::伪元素选择器用于表示无法在HTML中语义表达的实体。常用的有：::first-line,::first-letter,::selection,::after,::before,::placeholder；语法：两个双引号『::』::first-line用于第一行文本的特殊样式。//设置p元素第一行的样式颜色为红色p:first-line{color:#ff0000;font-variant:small-caps;}“首字母”伪元素只能用于块级元素。在使用::first-line伪元素的选择器中，只能使用一小部分CSS属性：所有与字体相关的属性，所有与背景相关的属性。更多详情，点击查看::first-letter用于为文本的首字母设置特殊样式。//设置p元素首字母的样式颜色为红色，字体为xx-largep:first-letter{color:#ff0000;font-size:xx-large;}同first-letter，只能用于块级元素，只能使用一些CSS属性，如color、font-size、font-weight等。点击toview::selection应用于用户突出显示的文档部分（例如用鼠标或其他选择设备部分选择）。//将用户选择的背景色设置为cyan::selection{background-color:cyan;}只有一小部分CSS属性可用于::selection选择器：color、background-color、cursor、caret-color，大纲，文字装饰，文字强调颜色，文字阴影。点击查看更多内容::before在元素内容之前插入新内容。//在a标签的内容前添加心形图标a::before{content:"?";}::before和::after生成的伪元素不能应用于
