任务7-CSS选择器

1、class 和 id 的使用场景?

class是调用类选择器，是用来为同一类标签具有相同的属性，类似于一个特征，调用方式用.class name 如定义

，调用的时候.nihal{}，就调用了；
id 类似于人的身份证，是唯一的标签，在语法中为专一的某个标签设置属性，如定义,调用的时候用#nihuai{}就可以调用这个唯一的span标签了；

2、CSS选择器常见的有几种?
基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器
3、选择器的优先级是怎样的?对于复杂场景如何计算优先级？
从高到低分别是：

1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式，作为style属性写在元素标签上的内联样式
2.id选择器
3.类选择器
4.伪类选择器
5.属性选择器
6.标签选择器
7.通配符选择器
8.浏览器自定义

对于复杂场景根据排序来选择：
ID选择器的特殊性值，加0,1,0,0;
类选择器、属性选择器或伪类，加0,0,1,0;
标签选择器和伪元素，加0,0,0,1;
通配选择器对特殊性没有贡献，即0,0,0,0;
最后比较特殊的一个标志!important(权重)，它没有特殊值，但是他的优先级是最高的，为了方便记忆，可认为他的默认值是1,0,0,0.
根据同级别比个数，优先级别大于后面级别，如1100>1000 1000>0300;
4、a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
四个选择器优先级相同，考虑他们会相互覆盖，应该按照这个顺序：

a:link（未被点击）
a:visited（已被点击）
a:hover（鼠标悬停其上）
a:active（鼠标已经按下，还没有释放）

因为：
1.四个选择器优先级相同，越往后的样式会覆盖前面的样式
2.链接被访问后，样式会发生改变，所以a:visited应放在a:link之后
3.当鼠标悬停在链接上时，无论链接是否已经被访问过，其样式都会发生改变，所以a:hover应放在a:visited之后
4.当鼠标按下链接但未松开时，链接样式会发生改变，但此时也属于鼠标悬停的状态，所以应把 a:active 放在 a:hover 之后，这样可以覆盖a:hover的样式

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

header{ //id名为head的选择器

}

.header{//类名为header的选择器
}

.header .logo{//两个类有空格，类名为header元素下的后代为类名为log的子元素
}
.header.mobile{//没有空格， 一个类中同时有header与mobile,如

，这个类可以赋值属性和调用，但是

这个值是调用不了的
}
.header p, .header h3{//有逗号表示交集选择器，表示类名为header中的后代P元素与类名为header中的后代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下的后代中input 中type类型为text的元素

}

列出你知道的伪类选择器：

搜狗截图17年09月29日1752_1.png

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

div:first-child //没有空格，表示div下的第一个孩子的所有元素
div :first-child//有空格，表示 所有div后代中 直系的第一个孩子

1.jpg

div:first-of-type 所有div元素内所有元素中属于其父元素的首个子元素
div :first-of-type所有div元素内所有元素中属于其父元素的首个类型的子元素

2.jpg

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

aa

bb

ccc

http://js.jirengu.com/ciyijokali/1/edit

5.png