class 和 id 的使用场景
id定位到页面上唯一元素，而class定位到某一类元素。
CSS选择器种类
（1）基础选择器
* 通用选择器，匹配页面任何元素（这便决定了它很少被使用）
#id id选择器，匹配特定id的元素
.class 类选择器，匹配class特定类的元素
element标签选择器
（2）组合选择器
E，F 多元素选择器，用，分隔，同时匹配元素E和元素F
E F后代选择器，用空格分隔，匹配E元素所有的后代
E>F子元素选择器，用>分隔，匹配E元素所有的直接元素（注意此处选择是第一层级的，而嵌套的不会被选择）
E~F普通相邻选择器，匹配E元素之后的所有同级元素
E+F直接相邻选择器，匹配E元素之后的相邻同级元素F
.class1.class2表示既..又..（注意中间没有分隔符）
element#id用的不多#id本身就可以选择
（3）属性选择器
E[attr] 匹配所有具有属性attr的元素
E[attr=value]匹配所有属性为value的元素
E[attr~=value]匹配所有属性attr，具有多个空格分隔，其中一个值等于 value的元素。
E[attr^=value]匹配属性attr的值以value开头的元素
E[attr$=value]匹配属性attr的值以value结尾的元素
E[attr*=value]匹配属性attr的值包含value的元素
（4）伪类选择器
E:first-child 匹配作为长子的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active匹配鼠标已经按下但没有释放的元素
E:hover 匹配鼠标悬停其上的元素
E:focus 匹配获得当前焦点的元素
E:long(c)匹配long属性=c的元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E:selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与nth-child(n)作用类似，但是仅匹配使用同种标签的元素
（5）伪元素选择器
E::first-line 匹配E元内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
- 选择器优先级；复杂场景如何计算优先级
（1）优先级（高到低）
1.在属性后面使用！important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
（2）复杂场景如何计算优先级：作如下归类：a=行内样式<div style="xxx"></div>；b=id选择器；c=类、属性和伪类选择器；d=标签、伪元素选择器；通过计算和比较大小来定夺谁优先，a大则最优先，a相等则比较b，以此类推。
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标签和h3标签
#header .nav>li{ } id为header的class为nav元素的直接子元素为li的标签
#header a:hover{ } id为header元素中的a标签的hover状态
#header .logo~p{ } id为header下 class为logo标签之后所有的p标签
#header input[type=“text”]{ } id为header的后代中，input标签中，属性type的值为"text"的元素集合
div :first-child和div :first-of-type的作用和区别
first-child 匹配其父元素的第一个子元素
first-of-type 匹配其父元素下使用同种标签的第一个元素
div :first-child:匹配div下的第一个子元素
div :first-of-type:匹配div下同种类型第一个，得到可能不止一个
【 ！需要注意：加个空格会变成组合选择器，而这两个的区别同上两个一样，所匹配的目标不一样】
网友评论