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