一、CSS选择器常见的有几种?
常见选择器有如下几种：
1. 基础选择器：
基础选择器
2. 组合选择器：
组合选择器
3. 属性选择器：
属性选择器
4. 伪类选择器：
伪类选择器
5. 伪元素选择器：
伪元素选择器
二、选择器的优先级是怎样的?
当同一个元素在多个不同的地方定义不同的属性值，那么最后渲染的样式效果以哪里定义为准，这就涉及到优先级问题，除了每个选择器有规定的优先级外，基本规则是规定属性越具体优先级越高，例如内联样式表>内部样式表>外部样式表；
以下是css样式、选择器的优先级从高到低排列：
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
9. 浏览器自定义
三、class 和 id 的使用场景?
- id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
- class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；
四、使用CSS选择器时为什么要划定适当的命名空间？
1. 方便后期代码维护，代码可读性更高，更容易理解样式的意图；
2. 便于重复调用使用该样式；
3. 便于精确定位样式作用的位置；
4. 避免样式污染；
五、以下选择器分别是什么意思?
以下为各个选择器的作用备注：
#header{
} /*id选择器，匹配id="header"的元素*/
.header{
} /*类选择器，匹配class="header"的元素*/
.header .logo{
} /*后代选择器，匹配class="header"元素的后代元素中class="logo"的元素*/
.header.mobile{
} /*类选择器，匹配class="header mobile"的元素*/
.header p, .header h3{
} /*多元素选择器，匹配class="header"元素的后代p元素和后代h3元素*/
#header .nav>li{
} /*多元素选择器，匹配id="header"元素的后代class="nav"元素的直接后代li元素*/
#header a:hover{
} /*伪类选择器，匹配id="header"元素的后代a元素鼠标悬浮在其表面时的样式*/
六、列出你知道的伪类选择器
见第一题选择器类型中的伪类选择器；
七、:first-child和:first-of-type的作用和区别
- ：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>
<!-- div下的第一个子元素且是类为class="item1"的第一个p元素，
所以“.item1:first-child” 和“.item1:first-of-type”对其有效-->
<h3 class="item1">bb</h3>
<!-- div下的第二个子元素且是类为class="item1"的第一个h3元素，
所以“.item1:first-of-type”对其有效-->
<h3 class="item1">ccc</h3>
</div>
所以输出时aa字体呈红色且带蓝色背景，bb带蓝色背景；
九、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
-
text-align: center的作用：
是元素文本内容水平居中，一般作用在块级元素上，使块级元素内部的行内元素在占据范围内居中显示，它居中是针对其父容器的空间范围居中的；
十、如果遇到一个属性想知道兼容性，在哪查看?
查询CSS属性的兼容性一般使用can i use网站；
如图，输入inline-block，查询结果，绿色块标示代表对应浏览器可以支持：
can i use
声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！
网友评论