1.CSS选择器常见的有几种?
- id选择器。
- 类选择器。
- 伪类选择器。
- 属性选择器。
- 标签选择器。
- 组合选择器。
2.选择器的优先级是怎样的?
- 在属性后面使用！important，会覆盖页面内任何位置定义的元素样式。
- 为style属性写在元素标签上的内联样式。
- id选择器。
- 类选择器。
- 伪类选择器。
- 属性选择器。
- 标签选择器。
- 通配符选择器。
- 浏览器自定义。
3.class 和 id 的使用场景?
- id指定标签的唯一标识。
①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
②用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userid的标签获得焦点。 - class指定标签的类名。
①CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
5.使用CSS选择器时为什么要划定适当的命名空间？
- 方便代码的管理与维护
- 提高代码的可读性
- 避免与他人代码相冲突
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和饥人谷所有，转载须说明来源!
