2022年高频前端面试题汇总之CSS篇（一）

　　1、css 选择器有哪些，权重是什么样的？

　　选择器含义：选择器是查找页面元素的一种方式方法，选择器的种类有很多种。

　　常用的选择器有以下内容：

　　1、ID　　#id

　　2、class　　.class

　　3、标签　　p

　　4、通用　　*

　　5、属性　　type="text"

　　6、伪类　　:link :visited :hover :active

　　7、伪元素　　::first-line :first-letter

　　8、子选择器 div>p

　　9、后代选择器 div p

　　10、相邻兄弟 div+p

　　11、通用兄弟 div~p

　　12、结构伪类 :nth-child :first-child :last-child

　　权重计算规则：

　　1、第一等：代表内联样式，如: style=””，权值为1000。

　　2、第二等：代表ID选择器，如：#content，权值为0100。

　　3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。

　　4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。

　　5、通配符、*权值为0000。

　　6、继承的样式没有权重值。

　　important > 内联 > ID > 类| 伪类 | 属性选择|伪对象 > 标签 > 继承 > 通配符

　　2、css：一个容器(页面)，里面有两个div左右摆放并且高度和容器高度一致，左div不会随着页面左右伸缩而变化，右div随页面左右伸缩宽度自适应(手写)

```html

<div class="right">北京千锋互联科技有限公司（下面简称“千锋教育”），成立于2011年1月，立足于职业教育培训领域，公司现有教育培训、高校服务、企业服务三大业务板块。教育培训业务分为大学生技能培训和职后技能培训；高校服务业务主要提供校企合作全解决方案与定制服务；企...</div>

</div>

<style>

margin: 0;

padding: 0;

}

.container{

max-width: 1000px;

height: 500px;

background-color: yellow;

margin: 20px auto;

display: flex;

}

.container .left{

width: 300px;

background-color: orange;

}

.container .right{

flex: 1;

background-color: red;

}

</style>

```

　　更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。