本教程版权归小圆和饥人谷所有，转载须说明来源
问答
1. CSS选择器常见的有几种?
- 基础选择器
- 关系选择器
- 属性选择器
- 伪类选择器
- 伪对象选择器
- 通配符选择器
2. 选择器的优先级是怎样的?
!important > 标签内样式 > id选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 标签选择器 > 通配符选择器 > 浏览器默认样式
3. class 和 id 的使用场景?
- class 用于主区块里面的详细内容，同一个class可以重复出现，一个标签可以有几个不同的class。
- id多使用于主要块级元素，id一个页面中只能出现一次，有些独一无二的元素也可使用id。
4. 使用CSS选择器时为什么要划定适当的命名空间？
- 提高代码可读性，加强语义化，便于编写和调试代码
- 有利于浏览器解析和渲染页面
- 团队协作时避免和他人命名产生冲突，便于维护
5. 以下选择器分别是什么意思?
#header{
}
//选择id名为header的元素
.header{
}
//选择class名为header的元素
.header .logo{
}
//选择class名为header的元素下的class名为logo的元素
.header.mobile{
}
//选择class名同时为header和mobile的元素
.header p, .header h3{
}
//选择class名为header的元素下的p和class名为header的元素下的h3
#header .nav>li{
}
//选择id名为header的元素下的class名为nav的直接子元素li
#header a:hover{
}
//选择id名为header的元素下的a在鼠标划过时的样式
6. 列出你知道的伪类选择器
-
E:link设置超链接a在未被访问前的样式（特指a标签） -
E:visited设置超链接a其链接地址已被访问过的样式（特指a标签） -
E:hover设置鼠标悬停在元素上的样式（不限于a标签） -
E:active设置元素在鼠标按下时的样式（不限于a标签） -
E:not(s)匹配不含有s选择器的元素E -
E:first-child父元素的第一个子元素 -
E:last-child父元素的最后一个子元素 E -
E:only-childE元素是唯一的子元素时被匹配 -
E:nth-child(n)匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。 -
E:nth-last-child(n)匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。 -
E:first-of-type匹配同类型中的第一个同级兄弟元素E。 -
E:last-of-type匹配同类型中的最后一个同级兄弟元素E。 -
E:only-of-type匹配同类型中的唯一的一个同级兄弟元素E。 -
E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E。 -
E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E。 -
E:empty匹配没有任何子元素（并且不包括空格、回车）的元素E -
E:checked匹配用户界面上处于选中状态的元素 E。(用于 input type 为 radio 与 checkbox 时) -
E:enabled匹配用户界面上处于可用状态的元素E。 -
E:disabled匹配用户界面上处于禁用状态的元素E。 -
E:target匹配相关URL指向的E元素。 -
E:root匹配E元素在文档的根元素。在HTML中，根元素永远是HTML。
7. :first-child和:first-of-type的作用和区别
- :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
- :first-of-type 匹配的是某父元素下相同类型子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
8. 运行如下代码，解析下输出样式的原因。
<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>
.item1:first-child 当div中的第一个子元素的class="item1"时，样式有效，所以内容 aa 为红色。.item1:first-of-type 选择的是不同标签的第一个class="item1"的元素，并且标签p和h3都有class="item1"的元素，所以内容aa和bb的背景为蓝色。
9. text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
文字居中或者让inline-block居中，一般作用在块级元素上或者inline-block上，能让块级元素里的文字和inline-block元素居中，能让inline-block里的文字居中。
10. 如果遇到一个属性想知道兼容性，在哪查看?
可以在Can I Use网站查看
