CSS选择器1.id选择器#id{},"#id"选择元素2.class选择器.class{},".classname"选择元素3.label选择器div{},"tagname"选择元素4.通配符选择器{},""选择所有元素5.组合选择器：分组选择器E,F","逗号分隔，同时选择E,F元素后代选择器EF用空格分隔，选择E元素下的所有F元素（不管F元素嵌套多少层都会被选中）直接子选择器E>F“>”分隔，选择E元素下的直接子元素F，即E元素下的一级子元素F。相邻兄弟选择器E+F，“+”分隔被选E元素F之后的直接相邻元素通用相邻选择器E~F，“~”分隔被选E元素F6后面的所有兄弟元素。伪类选择器L-V-H-A,:link,:visited,:hover,:active7。伪元素选择器E::first-line选择E元素内容的第一行E::first-letter选择E元素内容的首字母E::before在E元素之前插入内容内容E::afterInsertcontentE元素前后content是可以插入额外内容的地方，需要和content属性一起使用8.属性选择器input[type="text"]{width:150px;}选择器优先级css选择器优先级核心：每个选择器都有自己的优先级，范围越具体，优先级越高。CSS优先级从高到低是：1.在属性后使用!important将覆盖页面中任意位置定义的元素样式。2.写在元素标签上的内联样式作为样式属性3.id选择器4.类选择器5.伪类选择器6.属性选择器7.标签选择器8.通配符选择器9.浏览器自动定义当一个CSS样式规则由以下组成时多重选择器，id选择器的权重为1000，类选择器为100，标签选择器为10，优先级由权重之和决定。当两个CSS规则的权重相同时，谁更具体，谁就被使用，即权重越高的选择器越具体，优先级就越高。当两个选择器规则和权重相同时，后一种风格会覆盖前一种！div{color:#333;}div{color:#666;}这样，divcopy的颜色就明显是#666了。class和id的使用场景是页面上的唯一标识，class标识页面上的某一种样式。它是通用的，可以重复使用。一个元素的类名可以写成class="introother"，即可以有多个类名，代表两个类名叠加对应的样式。id名称不能这样写。ID名常用于页面布局（标记大框），部分页面布局中一般使用class进行样式定义，因为命名时类名可以写一样，只需要写class的样式即可一次，就可以让大家重复使用相同风格的元素。使用CSS选择器时，划定合适的命名空间，提高代码可读性，方便维护选择器使用示例html#header{}/*选择id为header的元素*/.header{}/*选择class=header的元素*/.header.logo{}/*选择class=header下的所有class=logo元素*/.header.mobile{}/*选择class="headermobile"的元素*/.headerp,.headerh3{}/*选择class=header元素下的所有p元素，选择class=header元素下的所有h3元素*/#header.nav>li{}/*选择id=header元素下的所有class=nav的直子elementoftheelementli*/#headera:hover{}/*选择id=header元素下的所有a元素，使用hover伪类*/普通伪类选择器[1]结构伪类选择器E:first-child选择E所在父元素下的第一个子元素，子元素为E元素E:last-child选择pa下的最后一个子元素租用E所在元素，子元素为E元素E:root选择E所在根节点的元素。对于HTML，选择HTML元素E:nth-child(n)选择E所在父元素下的第n个子元素，子元素为E元素E:nth-last-child(n)选择最后一个E所在父元素下的第n个子元素，子元素为E元素E:nth-of-type(n)选取E所在父元素下同类型元素的第n个E元素E：nth-last-of-type(n)选取E所在父元素下同类型元素中的倒数第n个元素EE:first-of-type选取父元素下同类型第一个元素E所在的E元素E:last-of-type选择最后一个E元素E:only-child匹配父元素中唯一的子元素，相当于:first-child:last-child或:nth-child(1):nth-last-child(1)E:only-of-type匹配父元素下唯一使用相同标签的子元素，相当于:first-of-type:last-of-输入或:nth-of-type(1):nth-last-of-type(1)E:empty匹配一个没有子元素的元素，并且该元素没有任何文本节点E:not(F)匹配任何不匹配当前选择器的元素[2]动态伪-类选择器序列L-V-H-Alink-visited-hover-activea:link{color:red;}a:visited{颜色：蓝色；}a:hover{颜色：gree;字体大小：20px；}a:active{颜色：金色；}a:focus{颜色：金色；//元素获得焦点后的样式}：first-child和:first-of-typeE的作用和区别：first-child指定元素E，并在其父元素下找到第一个E元素E:first-of-type指定一个E型元素，在其父元素下找到E型元素的第一个代码示例：html
