1.CSS基础选择器CSS基础选择器包括标签选择器、类选择器、id选择器、通配符选择器四大类。对于同一个标签，这些方式定义的样式优先级为：通配符选择器<标签选择器<类选择器span{font-size:12px;}第一个选择器名称的意思是：父选择器名称第二个选择器名称的意思是：子选择器名称3、相邻选择器/*selectdiv相邻的兄弟p元素（p元素紧跟在div之后，并且在同级)*/div+p{font-size:12px;}第一个选择器名称表示：“兄弟”选择器名称第二个选择器名称表示：“兄弟”选择器名称，其结构为第一个选择器指定前面相邻元素，后续选择器指定相邻元素4。brother选择器/*选择div标签后面所有同级的p元素*/div~p{font-size:12px;}第一个选择器名字意思是：“兄弟”选择器名字第二个选择器名字意思是：“兄弟”选择器name的基本结构是第一个选择器指定同一级别的前面元素，后面的选择器指定同一级别的所有匹配元素。兄弟选择器和相邻选择器的区别在于，相邻选择器只能选择与前一个元素相邻的匹配元素，而兄弟选择器可以选择前一个元素之后同一级别的所有匹配元素。5.组选择器/*选择所有div,p,h1元素*/div,p,h1{font-size:12px;}它的基本结构是选择所有以逗号分隔的匹配元素。三、属性选择器1.只指定属性名称/*形式：E[attr][attr]...:*/.nava[id]{font-size:12px;/*选择class为nav的元素在所有子元素中，id属性为a的元素*/}.nava[id][title]{font-size:12px;/*选择class为nav的元素的所有子元素，带有id属性和title属性的a元素*/}2、指定属性名，并指定属性值/*形式：E[attr="value"]...:*/.nava[id="one"]{font-size:12px;/*在class为nav的元素的所有子元素中选择id属性值为其中一个的a元素*/}.nava[class="navfirst"][title]{font-size:12px;/*选择class为nav的元素的所有子元素中，先有一个title属性和class属性值为nav的元素*/}注意：属性值必须完全匹配3.指定属性名，并且具有与上述唯一的属性值，不同之处在于属性值不必完全匹配。属性值是一个词表（类似于class，可以有多个），只要词表中有一个值就是value。/*形式：E[attr~="value"]...:*/.nava[class="navfirst"][title]{font-size:12px;/*选择所有class为nav的元素，子元素中有title属性且class属性值为nav或first或navfirst的元素*/}4.指定属性名，属性值开始值的形式为/*:E[attr^="value"]...:*/.nava[title^="https://"]{font-size:12px;/*选择class为nav的元素的所有子元素，有title属性，title属性值为https://*/}开头的a元素5.指定属性名，属性值以结尾/*形式的值：E[attr$="value"]...:*/.nava[href$="png"]{font-size:12px;/*选择class为nav的元素的所有子元素，有href属性，href属性值以png结尾的a元素*/}6.指定属性名，属性值包含值/*形式：E[attr*="value"]...:*/.nava[title*="mine"]{font-size:12px;/*选择class为nav元素的所有子元素都有title属性，title属性值包含我的a元素*/}7、指定属性名，属性值为value或者以开头的值value-/*Form:E[attr|="value"]...:*/.navimg[src|="img"]{width:200px;/*选择class为nav的元素的所有子元素，具有src属性，src属性值为img或img-开头的元素*/}4.伪类选择器/*伪类的形式类选择器：E:pseudo-class*/a:hover{color:"red"}E表示：元素伪类表示：伪类名伪类选择器分类1、动态伪类anchor伪类：：link:visited行为伪类::hover:active:focus访问一个链接的顺序是：link-->visited-->hover-->active2，结构伪类：first-child：选择一个元素的第一个子元素：last-child：选择一个元素的最后一个子元素：nth-??child(n)：选择第一个元素的第n个子元素：nth-last-child(n)：从后往前数，选择元素的第n个子元素：nth-of-type()：选择指定元素，例如：div：nth-of-type("p"):nth-last-of-type()：从后往前数，选择指定元素：first-of-type()：选择父元素下的第一个元素同类型子元素：last-of-type()：选择上级元素下同类型的最后一个子元素：only-child：被选元素是其父元素的唯一子元素：only-of-type:select元素是唯一一个与其父元素同类型的子元素:empty:被选元素里面没有内容3.负伪类:not():过滤掉特定的元素e.g:input:not([type="submit"]){}4、UI状态pseudo-class:enabled:用于指定元素处于可用状态时的样式:disabled:用于指定元素处于不可用状态时的样式:read-only:used指定元素处于可用状态时的样式只读状态：read-write：用于指定元素非只读时的样式：cehcke：用于指定单选按钮或复选框复选框在表单中处于选中状态时的样式：required：元素具有required属性5、target伪类：target：target元素上面匹配文档（页面）URI中某个标识符的target元素是伪类，下面是伪元素:pseudo-class:用来给一些selector添加特效伪元素:用来给一些selector设置特效上面两个概念看了肯定会一头雾水，不还是一样吗？下面介绍两者的区别：1、伪类主要是给某些元素添加一些特殊的效果，比如a标签的链接，被访问的伪类等；而伪元素创建一个虚拟容器，它不包含任何DOM元素，但可以包含内容并设置其样式2.多个伪类可以同时使用，但同时只能使用一个伪元素同一时间
