1.class 和 id 的使用场景?

id
指定标签的唯一标识。

格式：<input type=password id="userpwd" />

应用场景：
①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
②用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。

特性 ：id属性的值，在当前的page页面要是唯一的。

class
指定标签的类名。

格式：<input type=button class="btnsubmit" />
应用场景：

①CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。

特性：
可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btnsubmit btnopen'

2.css常见的选择器？

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

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

属性后+!important：p {color:#ccc!important;}
内联样式：
id选择器： #id
类选择器： .class
伪类选择器：a:link
属性选择器：h1{}
标签选择器：p[XXX]
通用选择器：*
浏览器自定义
复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

a：link 用在为访问的链接上。
a：hover 用于鼠标光标置于其上的链接
a：active 用于获得焦点（如“被单击”）的链接上
a：visited 用在已经访问的链接上
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后(如果没有a:hover则必须被置于 a:link 和 a:visited 之后)，才是有效的。

css中关于超链接的四个属性一般正常顺序为：link，visited，hover，active，即
a:link
a:visited
a:hover
a:active

原因：
当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后
当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active置于a:link,a:visited,a:hover 之后

5.以下选择器各是什么意思？

header{

} id为header的元素
.header{
} class为header的元素
.header .logo{
} 选择类名里既有header又有logo的
.header.mobile{
} 选择类名里既有header又有mobile的
.header p, .header h3{
} 选择所有类名为header下的p后代与h3后代共用样式。

header .nav>li{

} 选择id为header下类名为nav的元素的直接子元素。

header a:hover{

} 选择id为header的a链接鼠标放上去时候的状态

header .logo~p{

} 选择id 为header元素下的类名为logo的元素后的所有相邻的p元素。

header input[type="text"]{

} 选择id为header元素下type属性值为text的input元素。

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

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：

Paste_Image.png

p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；

p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；
h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；
span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

所以，通过以上两个例子可以得出结论：
（1）
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
（2）
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。

Paste_Image.png