Learn HTML&CSS the hard way IV

CSS选择器常见的有几种?

---

元素选择器:

div

ul

ol

h1-6

p

a

类选择器：

.class{}

id选择器：

#id{}

选择器的优先级是怎样的?

---

优先级：

！important是最高的，其次是标签里面的style，除！important之外，用style属性编写的规则总比其他规则特殊，具有id选择器的规则比没有id选择器的规则特殊。具有类选择器的规则比只有类型选择器的规则特殊，然后依次是伪类，属性，标签，通配符，浏览器自定义选择器，如果两个规则特殊性相同，则后定义的规则优先。

class 和 id 的使用场景?

---

class是代表一类，可以在页面上重复使用，比如某个可以重复使用的样式，布局，颜色等。

id是页面里独一无二的，可以用于页面的大块的布局，或者特有的属性，或者埋点。

使用CSS选择器时为什么要划定适当的命名空间？

---

使用命名空间后可以对特定的区域进行样式修改。

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

---

#header{}                      header的id选择器

.header{}                       header的类选择器

.header .logo{}              既是header类的后代又是logo类的选择器

.header.mobile{}           一个既包含header又包含mobile的类选择器

.header p, .header h3{} header类的p元素选择器，以及header类的h3元素选择器

#header .nav>li{}          id为header，里面类为nav的第一个li元素

#header a：hover{}        id为header 里的a标签的伪类hover

列出你知道的伪类选择器

---

hover

focus

active

after

before

:first-child和:first-of-type的作用和区别

---

:first-child是指第一个子元素

:first-of-type是指符合样式的第一个子元素，不一定是模块内的第一个子元素

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

---

.item1:first-of-type{}是指同一个父元素下,同一标签里，class含有item1的第一个子元素

.item1:first-child{}是指同一个父元素下，class含有item1的第一个子元素

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中

---

text-align：center可以让模块内容居中，作用在块级元素上，可以让行内元素居中

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

---

caniuse.com