css 选择器

一、class 和 id 的使用场景?

• id匹配特定的id，定位页面某一特定的元素
• class 类选择器，匹配class包含（不是等于）特定的元素，定位某一类的元素

二、 CSS选择器常见的几种类型

1、基础选择器
*匹配页面任何元素
id匹配特定的id，定位页面某一特定的元素
class 类选择器，匹配class包含（不是等于）特定的元素，定位某一类的元素
2、组合选择器
E,F 多元素选择器，同时选择E F
E F 后代选择器
E>F 子元素选择器，匹配E元素所有直接子元素
E+F 直接相邻选择器
E~F 普通相信选择器，E所有的邻居
3、属性选择器
4、伪类选择器
一个元素处于另外一种状态
a的伪类选择器顺序：1 a{} 2 a:visited{}3 a:hover{} 4 a:active{}
5、伪元素选择器

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

选择器优先级：1、在属性后面使用！import，覆盖所有的样式
2、作为style属性，写在元素标签上的内联样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
复杂场景优先级：当按照以上优先级出现冲突时，则按照选择符对应的数相加后得到的四位数，从左到右进行比较，大的优先级越高
四个级别：行内选择符、id选择器、类选择器、元素选择器对应的初始四位数 0、0、0、0，根据个数来算，从左到右进行比较，大的优先级越高，1,0,0,0 > 0,99,99,99

四、a:link, a:hover, a:active, a:visited 的顺序

   ：1 a：link  2 a:visited{}3 a:hover{} 4 a:active{}

由于会出现相互覆盖的情况，所以要按照这个顺序执行

五、

    #header{}   // 为id等于header的设置样式
    .header{}        // 为类是header的一类元素设置样式
    .header .logo{} // 为class是header 子元素中class是 logo的的元素设置样式
    .header.mobile{} clas同时有header 和mobile的元素设置元素设置样式
    .header p, .header h3{ }   // class 为header后代中，p元素和h3元素设置样式
    #header .nav>li{}   // id 是header 的子元素中id为nav的所有直接子元素li 设置样式
     #header a:hover{}    //id 为header的子元素中，a元素处于悬浮状态时候的样式 
    #header .logo~p{}   // id 为header的子元素中，class是logo的所有相邻的p元素设置样式
    #header input[type="text"]{}   // id 是header的子元素中，input的元素type是text的所有元素设置样式

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

伪类选择器:

标签	描述
a:link	匹配所有未被点击的链接
a:visited	匹配所有已经被点击的链接
a:hover	匹配a链接处于悬浮状态的元素
E:focus	匹配当前处于焦点的元素
E:disabled	匹配被禁用的元素
E:checked	匹配被选中的radio或者checkbox元素
E:selection	匹配用户当前选中的元素
E:last-child	匹配父元素的最后一个子元素
E:first-of-type	匹配父元素下使用同种标签的第一个子元素
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，

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

div:first-child ： div第一个子元素
div:first-of-type：父元素下的同种类型的第一个元素