入门7

1.class 和 id 的使用场景?

• id定位到页面上唯一的元素；
• class定位到页面上某一类的元素。

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

• 基础选择器
• 组合选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

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

CSS优先级
从高到低分别是

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
2.id选择器
3.类选择器
4.伪类选择器
5.属性选择器
6.标签选择器
7.通配符选择器
8.浏览器自定义
对于复杂场景，根据组合选择器按照以下规则统计各类选择器的个数

• 行内样式
  ==> a
• ID 选择器 ==> b
• 类，属性选择器和伪类选择器 ==> c
• 标签选择器、伪元素 ==> d
  先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；以此类推。

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

1.a:link
2.a:visited
3.a:hover
4.a:active
如果不是这样的顺序，会产生样式相互覆盖，从而达不到预期效果。

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

#header{ } 匹配id为header的元素；
.header{ } 匹配class为header的元素；
.header .logo{ } 匹配class为header，子类中class为logo的元素；
.header.mobile{ } 同时匹配class为header和mobile中的元素；
.header p, .header h3{ } 匹配class为header中子类为屁和h3的元素；
#header .nav>li{ } 匹配id为header中的class为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 的元素；

• 列出你知道的伪类选择器
  E:first-child 匹配作为长子（第一个子女）的元素E；
  E:link 匹配所有未被点击的链接；
  E:visited 匹配所有已被点击的链接；
  E:active 匹配鼠标已经其上按下、还没有释放的E元素；
  E:hover 匹配鼠标悬停其上的E元素；
  E:focus 匹配获得当前焦点的E元素；
  E:lang(c) 匹配lang属性等于c的E元素；
  E:enabled 匹配表单中可用的元素；
  E:disabled 匹配表单中禁用的元素；
  E:checked 匹配表单中被选中的radio或checkbox元素；
  E::selection 匹配用户当前选中的元素；
  E:root 匹配文档的根元素，对于HTML文档，就是HTML元素；
  E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1；
  E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1；
  E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素；
  E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素；
  E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)；
  E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)；
  E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)；
  E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)；
  E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)；
  E:empty 匹配一个不包含任何子元素的元素，文本节点也被看作子元素
  E:not(selector) 匹配不符合当前选择器的任何元素。
  n的取值
  1，2，3，4，5；
  2n+1, 2n, 4n-1；
  odd, even；

• 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元素下相同类型子元素的第一个；
• 运行如下代码，解析下输出样式的原因。

QQ图片20170912211428.png