CSS选择器

基本选择器

*{} 通配符选择器，适用任何元素
h1 标签选择器，选择h1标签内元素
.parent 类名选择器，选择class名为parent的元素
#child id选择器，选择id 名为child的元素
注意：class名不是唯一的，可以给多个元素同样的class名称，或者一个元素多个class名，但是同一个id名在一个页面内只允许出现一次，是唯一的。

多元素组合选择器

E,F 多元素选择器，同时匹配满足E和满足F的元素，用逗号隔开
E F 后代选择器，匹配E元素后代中满足F的元素，空格隔开
E>F 子代选择器，匹配E元素的子代元素中满足F的元素
E+F 毗邻选择器，匹配所有紧跟E元素之后的统计F元素
E～F 匹配任何在E元素之后的同级F元素

属性选择器

E[att] 匹配所有具有att属性的E元素，不考虑它的值。
E[att=val] 匹配所有att属性等于"val"的E元素
E[att^="val"] 属性att的值以"val"“开头的元素
E[att$="val"] 属性att的值以"val”结尾的元素
E[att*="val"] 属性att的值包含"val“的元素

伪类选择器

E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth- child(1):nth-last-child(1)
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector) 匹配不符合当前选择器的任何元素

伪元素选择器

E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

选择器优先级以及权重

优先级（下面选择器优先级逐级递增）
通配符选择器<标签选择器<属性选择器<伪类选择器<类选择器<id选择器<作为style属性写在元素标签上的内联样式<在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
权重计算
内联样式 权重值：1000
ID选择器 权重值：0100
类，伪类和属性选择器 权重值：0010
标签选择器和伪元素选择器 权重值：0001
通配符 权重值：0000

a:link, a:hover, a:active, a:visited 的顺序是怎样的？

顺序应为：a:link > a:visited > a:hover > a:active因为这四个伪类权重相同，所以遵循后面覆盖前面的原则，点击a链接后visited将永久生效，因此如果将visited放在最后，则visited会覆盖前面所有效果。因此如果想要hover和active生效，则需要将visited放在这两个之前。同理当鼠标放在a链接上时，hover生效，如果点击鼠标时候active生效，则需要active覆盖hover，所以所以active应该放在hover之后，所以最终的顺序如上所示.

以下选择器分别是什么意思?

#header{                                  /*匹配id="header"的元素 */
}
.header{                                  /*匹配class="header"的所有元素*/
}
.header .logo{                         /*匹配class="header"元素的所有class="logo"的后代元素*/
}
.header.mobile{                     /*匹配class="header mobile"的元素或类名同时含有header mobile的元素*/
}
.header p, .header h3{          /*匹配class="header"元素所有后代p元素和所有后代h3元素*/
}
#header .nav>li{                   /*匹配id="header"元素所有后代类名为nav的直接子元素li元素*/
}
#header a:hover{                /*可以控制id="header"元素所有后代a元素鼠标悬浮其上的样式*/
}
#header .logo~p{                /*匹配id="header"元素所有后代类名为logo元素的相邻同级p元素（无论直接相邻与否）*/
}
#header input[type="text"]{     /*匹配id="header"元素所有后代type="text"的input元素*/
}

列出你知道的伪类选择器

E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:first-child 匹配元素E的第一个子元素
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 ：

div:first-child： 匹配作为第一个子元素的div元素
div:first-of-type： 匹配第一个div子元素
div :first-child： 匹配div父元素的第一个子元素
div :first-of-type： 匹配div父元素的第一个div子元素

运行如下代码，解析下输出样式的原因。

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

结果：aa字体颜色为红色，aa bb的背景为蓝色
原因：div共有三个子元素分别为p h3 h3，.item1:first-child表示class为item且是父元素的第一个子元素即为aa元素，字体变红，.item1:first-of-type表示class为item且该子元素类型为父元素内出现的第一个即为aa bb 。背景变蓝。