任务8

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

1. id选择器。
2. 类选择器。
3. 伪类选择器。
4. 属性选择器。
5. 标签选择器。
6. 组合选择器。

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

1. 在属性后面使用！important，会覆盖页面内任何位置定义的元素样式。
2. 为style属性写在元素标签上的内联样式。
3. id选择器。
4. 类选择器。
5. 伪类选择器。
6. 属性选择器。
7. 标签选择器。
8. 通配符选择器。
9. 浏览器自定义。

3.class 和 id 的使用场景?

• id指定标签的唯一标识。
  ①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
  ②用于充当label标签for属性的值：示例：用户名：，表示单击此label标签时，id为userid的标签获得焦点。
• class指定标签的类名。
  ①CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。

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

1. 方便代码的管理与维护
2. 提高代码的可读性
3. 避免与他人代码相冲突

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

Paste_Image.png

7.列出你知道的伪类选择器。
E：link匹配所有未被点击的链接。
E：visited匹配所有已被点击的链接。
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)匹配不符合当前选择器的任何元素。
8.:first-child和:first-of-type的作用和区别
:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
9.运行如下代码，解析下输出样式的原因。

Paste_Image.png

.iteml:first-child:{clolor:red}是匹配class="iteml"的第一个元素。设置红色字体。所以aa是红色
.item1:first-of-type{background: blue;}匹配class="iteml"也就是一个类型的元素将应用为蓝色背景，而第一个类型就是p和h3，h3有2个，取第一个。所以aa和bb有蓝色背景。
10.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中。
作用:让块级元素内文本或图片水平居中。作用在块级元素。
11.如果遇到一个属性想知道兼容性，在哪查看?
can i use
本教程版权归饥人谷_duoduo和饥人谷所有，转载须说明来源!