css选择器

1.class 和 id 的使用场景?

id适用于特定的标签，同时也可以用作lable的for属性值

class可以用在具有同种属性的标签上，即同一类型。

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

---

1.基础选择器

  1.1 *通配符，可以匹配所有的元素

  1.2 #id ，id选择器， 匹配特定id的元素。

  1.3.class类选择器，匹配class包含的元素

   1.4标签选择器：

---

2.组合选择器

  2.1  E,F 多元素选择器，同时匹配E，F

  2.2  E F 后代选择器，匹配E的所有后代，不仅仅是子元素，子元素          向下递归。

   2.3 E>F子元素选择器，选择E的子元素，不向下迭代

   2.4  E+F直接相邻选择器，匹配E元素之后的第一个相邻的元素F

   2.5 E~F普通相邻选择器，匹配E元素之后的所有同级元素F

   2.6. class1.class2  中间没有空格隔开，是指一个元素中同时拥有            class1和class2这两个类。如下图1

图1

2.7element#ff中间没有空格隔开,表明一个id是ff的element元素如图2所示

图2

---

3.属性选择器

  3.1E[attr]:匹配所有具有属性attr的元素

  3.2 E[attr=value]:匹配属性值为value的元素

  3.3 E[attr~=value]:匹配所有属性attr具有多个空格分隔，           其 中一个值等于value的元素

  3.4 E[attr^=value]:匹配属性attr的值以value开头的元素

  3.5 E[attr$=value]:匹配属性attr的值以value结尾的元素

  3.6 E[attr*=value]:p匹配属性attr的值包含value的元素

4.伪类选择器

E:first-child:匹配元素E的第一个子元素

E:link ：匹配素有未被点击的链接

E:visited :匹配所有已经被点击的链接

E:active :匹配鼠标已经在其上按下，但是还没有释放的E元素

E:hover :匹配鼠标悬停其上的E元素

E:focus :匹配获得当前焦点的E元素

E:lang(c) :匹配lang属性等于c的元素

E:enabled :匹配表单中可用的元素

Edisabled :匹配表单中禁用的元素

E:checked: 匹配表单中被选中的radio或checkbox元素

E:selection: 匹配用户当前选中的元素

E:root :匹配文档的根元素，对于HTML文档，就是HTML元素

E:nth-child(n) :匹配其父元素的第n个子元素，第一个编号为1

E:nth-last-child :匹配其父元素的第n个子元素，第一个编号为1

E:nth-of-type(n):与:nth-child作用类似，但是仅匹配使用同种标签的元素

E:nth-last-of-type(n) :与nth-last-child作用相似，但是仅匹配使用同种标签的元素

E:first-child:匹配父元素的第一个子元素

E:last-child :匹配父元素的最后一个子元素

E:first-of-type :即 E:nth-of-type(1)

E:last-of-type :即 E:nth-last-of-type(1)

E:only-child :匹配父元素下仅有的一个子元素

E:only-of-type :匹配父元素下使用同种标签的唯一一个子元素

---

5.伪元素选择器

E::first-line:匹配E元素内容的第一行

E::first-letter:匹配E元素内容的第一个字母

E::before:在E元素之前插入生成的内容

E::after:在E元素之后插入生成的内容

---

3.CSS优先级(从高到低)：对于复杂场景如何计算优先级？

1.!important会覆盖所有之前的样式

2.内联样式

3 .id选择器

4.类选择器

5伪类选择器

6属性选择器

7标签选择器

8通配符选择器

9浏览器自定义

复杂场景计算：

行内样式为1000，id选择器是100，类和属性选择器以及伪类选择器为10，标签选择器以及伪元素是1，根据标签出现的情况，然后计算相应的值，然后再做比较。

例如：P{}则是1

           a：hover{} a是标签1，：hover是伪元素1，则总的结果为2

ul ol+li 三个标签为1，则总的结果是1+1+1=3

#cr .bii p 计算 #cr 100，.bii 是10，p是1 则结果是100+10+1=111

---

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

a:link,a:visited,a:hover,a:active 因为a:visited会在链接访问一次后永久生效，如果放在了最后则会永远的覆盖了其他的样式，如果将a:hover,a:active放它的后面，则会覆盖a：visited的样式，这样排列的原因就是因为四个样式的优先级相同，利用了后面的元素覆盖前面元素的原理才这样排列。

---

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

#header匹配id为header的元素

.header匹配class为header的元素

.header .logo匹配class为header元素下所有类为logo的后代

.header.mobile 匹配 类为header和mobile的元素

.headerp,.headerh3匹配类为header 下所有的p标签以及类header下所有h3的标签

#header .nav>li 匹配id为header 下所有类为nav并且第一个子元素为li的后代

#header a:hover 匹配 鼠标悬停在id为header元素的所有后代为a的标签

#header  .logo~p匹配id为header 后代中所有  class为logo普通相邻的p标签

#header  input[type="text"] 匹配id为header 后代中所有 属性值为text文本的的input标签

---

列出你知道的伪类选择器

上面已经列出了

---

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

div：first-child是父元素的第一个子元素

div：first-of-type 是父元素元素下第一个与父元素相同标签的标签元素

例题：

图

.child:first-child{color:red;}匹配 class为child元素的父元素下第一个子元素，其中h1的class为child，h1的父盒子为<div class="wrap">...,.wrap下的第一个子盒子为<h1 class="child">h1</h1>。

同理也适用于 h1的class为child的元素

.child:first-of-type分析：class为child的有三个 h1.child,h2.child,和h1.child{ct-h1}的，例如h2.child的父盒子下第一个h2相同标签的盒子，别的情况 一 一适用。

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

图1 图2分析