css基础知识整理 面试题，2024年最新真是恍然大悟啊

2.类选择器(如：class=“head”,class=“head_logo”)

3.ID选择器(如：id=“name”,id=“name_txt”)

4.全局选择器(如：*号)

5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)

6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)

7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

8.继承选择器(如：div p,注意两选择器用空格键分开)

9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link visited active hover。)

10.字符串匹配的属性选择符(^ $ _三种，分别对应开始、结尾、包含)

11.子选择器 (如：div>p ,带大于号>)

12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承> 浏览器默认属性

3.什么是css hack? ie 6,7,8的hack分别是什么？6,7,8,9 _ ,+, \0 ,\9

例： #test{

width: 300px;

height: 300px;

background-color: blue;

background-color: red\9; /_ all ie _/

background-color: yellow\0; /_ ie8 _/

+background-color: pink; /_ ie7 _/

_background-color: orange; /_ ie6 _/

:root #test{

background: purple\9; /_ ie9 */

}

@media all and {min-width: 0px} #test{background-color: black\0;} /* opera */

@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */

}

@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，让它能够同时兼容不同的浏览器,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

4.透明效果 rgba()和opacity的区别

首先来看rgba:

R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B