入门任务7 CSS选择器

class 和 id 的使用场景?

id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

CSS选择器常见的有几种?

基础选择器

基础选择器.png

组合选择器

组合选择器.png

属性选择器

属性选择器.png

伪类选择器

伪类选择器·.png

伪类选择器.png

伪元素选择器

伪元素选择器.png

选择器的优先级是怎样的?对于复杂场景如何计算优先级？

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
对于复杂场景，我们通过计算css不同选择器的个数来计算优先级，可以用一个四位数来表示，其中行内样式权重最高，行内样式的个数放在千位上，ID选择器权重次之，ID选择器的个数放在百位上，类、属性选择器以及伪类选择器权重相同，低于行内样式和ID选择器，所以，这个3个选择器的个数之和放在十位上，最后，标签选择器、伪类选择器权重最低，个数放在个位上。
for example：

#ct .box p {}     一个ID选择器，百位是1，一个类选择器，十位是1，一个标签选择，个位是1，所以是0111；
ul ol li.active {} 有一个伪元素选择器，十位是1，3个标签选择器，个位是3，所以是0013；
0111>0013 所以 前者的样式优先

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

a:link
a:visited
a:hover
a:active
四个都是伪类选择器，优先级相同；考虑他们会相互覆盖，所以要按照这个顺序

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

#header{ } ID为header的元素；
.header{ } class为header的元素；
.header .logo{ } class为header元素的后代元素中class为logo的元素；
.header.mobile{ } class既是header又是mobile的元素；
.header p, .header h3{ } class为header元素的后代中的p元素，和 class为header元素的后代中的h3元素
#header .nav>li{ } ID为header元素的的后代中class为nav的直接li子元素
#header a:hover{ } 鼠标悬停的ID为header元素的后代中a元素
#header .logo~p{ } ID为header的元素中的class为logo之后的同级p元素
#header input[type=“text”]{ } ID为header的元素中所有属性type值为text的元素

列出你知道的伪类选择器

E:first-child 匹配元素E的第一个子元素
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
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:not(selector) 匹配不符合当前选择器的任何元素

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

div:first-child 匹配div父元素中第一个子元素；
div :first-child 匹配div元素后代中的第一个子元素；
div:first-of-type匹配父元素下使用相同标签的第一个子元素；
div :first-of-type匹配div元素后代中第一个使用相同标签的子元素；

QQ截图20170517160232.png

.item1:first-child 匹配class为item1父元素下的第一个子元素，class为item1的p、h3元素的父元素都是div，div的第一个子元素是p，所以p字体颜色变红；
.item1:first-of-type 匹配父元素下第一个使用同种标签的子元素，父元素div下有p和h3 两种标签，所以p和第一个h3被选中，背景颜色变蓝。