CSS选择器

课程任务

1. class和id的使用场景？

id: 定义到页面上唯一的元素，一个页面上不要出现相同id的两个元素。

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

2. CSS的选择器常见的有几种

基础选择器包括：通用元素选择器，id选择器，类选择器，标签选择器；组合选择器；属性选择器；伪类选择器；伪元素选择器

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

在属性后面使用!important会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
继承

行内样式 ==> a
id选择器 ==> b
类，属性选择器 ==> c
标签选择器、伪元素 ==> d

例子	b	c	d	权重
*	0	0	0	0
li	0	0	1	1
ul li	0	0	2	2
ul ol+li	0	0	3	3
li.red.level	0	2	1	21
#x3y	1	0	0	100
#s12:not(FOO)	1	0	1	101

比较权重大小，权重越大，优先级越高

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

示例

这是一个样式覆盖的问题。如上图，以图三为例，当a标签出于hover状态的时候，它包含hover,visited,link三个状态，此时要保证hover样式排在最后，hover状态才能正常显示，不会被其他状态覆盖。同理，分析其他的三个状态，最终得出的顺序是：a:link,a:visited,a:hover,a:active

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

#head{
    /*id为head的元素*/    
}
.head{
    /*class包含head的元素*/
}
.header .logo{
    /*class包含header的元素后代中包含logo类的元素*/
}
.header.mobile{
    /*class即包含header又包含mobile的元素*/
}
.header p, .header h3{
    /*class包含header的元素后代中的p标签和h3标签*/
}
#header .nav>li{
    /*id为header的元素后代中包含nav类元素的所有直接子元素li*/
}
#header a:hover{
    /*id为header的元素后代中所有a标签的hover状态*/
}
#header .logo~p{
    /*id为header的元素后代与包含logo类元素之后的同级p标签*/
}
#header input[type="text"]{
    /*id为header的元素后代中type="text"的input标签*/
}

列出你知道的伪类选择器

选择器	含义
E:link	未被点击的链接
E:visited	已被点击的链接
E:hover	鼠标悬停其上的E元素
E:active	鼠标已经按下还未释放的E元素
E:focus	获得当前焦点的E元素
E:first-child	匹配E的父元素下作为长子的元素E(1.它是E 2.它是它父亲的第1个孩子)
E:nth-child(n)	排序为第n个子元素的E元素（1.它是E 2.它是它父亲的第n个孩子）
E:first-of-type	匹配父元素下使用同种标签的第一个子元素(1.它是E 2. 标签与E相同 3.它是它父亲的第1个孩子)
E:nth-of-type(n)	匹配其父元素下使用同种标签的第n个子元素(1.它是E 2. 标签与E相同 3.它是它父亲的第n个孩子)
E:root	匹配文档的根元素，对于HTML就是HTML标签
E:last-child
E:last-of-type

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”和“第一个div元素”

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




    
    Title
    



    aa
    bb
    ccc

.item1:first-child选中.item1父元素的第一子元素；.item1:first-of-type同时选中.item1父标签下p标签和h3标签的第一个元素。