任务8

问答

CSS选择器常见的有几种?
选择器的作用是匹配页面元素后赋予css样式
选择器分为
1. 基础选择器
  1.1. * 所有,everything
  1.2. # id 选某一个唯一的element
  1.3. . class 选一类element class 设定相同的
  1.4 elements 选h1 h2什么的。
  标签选择器尽量不要用,影响范围太大
2. 组合选择器 （一种结合操作）
  1.1 多元素选择器 E,F 并列两个
  1.2 后代选择器 E F E的所有F子元素
  1.3 子元素选择器 E>F E的所有F直接子元素
  1.4 相邻元素选择器 E+F 相邻的元素
  1.5 弟弟元素选择器 E~F 所有的弟弟
  1.6 且选择器 EF 满足E和F
3. 属性选择器
  按值选择
4. 伪类选择器
  按组件功能选择元素，还有一些常用的操作
5. 伪元素选择器
  选行，选第一个字母，插入值的功能

选择器的优先级是怎样的?
无条件优先的属性只需要在属性后面使用 !important 。它会覆盖页面内任何位置定义的元素样式。当然，IE 6不支持这个属性，于是它也成为一种hack被很多人所熟知，真正使命被人淡忘。不是很懂
第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理，所以不推荐使用。
第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;} 会覆盖 .classname{margin:3px;}。
第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。如 .classname{margin:3px;} 会覆盖 div{margin:6px;}
第五级由一个或多个类型选择器定义。如 div{margin:6px;} 覆盖 {margin:10px;} 。
最低一级的选择器是为一个通配选择器，用{margin:10px;}这样的类型来定义。

class 和 id 的使用场景?
class是需要针对一类元素加css，id是针对一个元素加css
使用CSS选择器时为什么要划定适当的命名空间？
为了更好的语义化，组件功能一目了然，增加可维护性，可读性。

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

#header{
}
id 是 header 的元素
.header{
}
类 是 header 的元素
.header .logo{
}
类是header 的子类是logo的元素
.header.mobile{
}
类是header且是mobile的元素
.header p, .header h3{
}
类是header 中的p 或者header中的h3
#header .nav>li{
}
类是header 中的nav中的所有直接元素li
#header a:hover{
}
类是header的所有超链接的hover功能

列出你知道的伪类选择器
选择器含义
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) 匹配不符合当前选择器的任何元素

:first-child和:first-of-type的作用和区别
first-child 匹配第一个儿子元素
first-of-type 匹配第一个同类儿子元素

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

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
   <h3 class="item1">bb</h3>
   <h3 class="item1">ccc</h3>
 </div>

aa是父亲的第一个孩子也是同类型第一个 firstoftype firstchild生效
bb是同类标签的第一个 firstoftype生效
cc 不是第一个也不是同类第一个，啥都不生效

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
作用在块结级元素的行内元素上，使其内容居中

如果遇到一个属性想知道兼容性，在哪查看?
caniuse w3c 查

问答

推荐阅读更多精彩内容