前端面试必备：CSS选择器优先级与隐藏元素技巧

需积分: 10 188 浏览量更新于2024-08-31 收藏 28KB DOCX 举报

"该文档包含了2016年BAT（百度、阿里巴巴、腾讯）以及其他互联网公司的前端面试中涉及的CSS相关题目，旨在测试应聘者对于前端开发，特别是CSS的掌握程度。" 在前端开发中，CSS（层叠样式表）扮演着至关重要的角色，它用于控制网页元素的布局和样式。以下是从文档中提炼出的关键知识点： 1. **CSS样式的应用方式**： - 外部样式表：通过`<link>`标签引入外部CSS文件，使样式可复用且易于管理。 - 内部样式表：将CSS代码写在`<head>`标签内的`<style>`标签中，适用于整个页面的样式统一。 - 内联样式：直接在HTML元素中使用`style`属性定义样式，针对性强但不易维护。 2. **CSS选择器**： - 派生选择器：如`p`或`div`等HTML标签选择器。 - ID选择器：使用`#idname`选择特定ID的元素。 - 类选择器：使用`.classname`选择具有特定类的元素。 - 属性选择器：如`[attr=value]`，较少使用。 - 后代选择器（如`div.a`）、群组选择器（如`p, div, #a`）。 **选择器优先级**： - 特殊性原则：选择器越具体，优先级越高。 - 计算方法：派生选择器1，类选择器10，ID选择器100。 - 如`div.test1.spanvar`优先级为111，`span#xxx.songsli`优先级为1111，`#xxxli`优先级为101。 3. **隐藏DOM元素**： - `display: none`：元素不占用空间，内容完全不可见。 - `visibility: hidden`：元素占用空间，内容不可见。 - 技巧性隐藏：如设置宽高为0，透明度为0，或负`z-index`。 4. **超链接状态问题**： - 访问过后的超链接失去`:hover`和`:active`样式，解决办法是调整CSS属性顺序，即`L-V-H-A`（link, visited, hover, active）。 5. **CSS Hack**： - CSS Hack是针对不同浏览器间CSS解析差异而采取的兼容策略。 - IE6 Hack：如`_property`，仅IE6识别。 - IE7 Hack：使用`*property`，IE7及更低版本识别。 - IE8 Hack：使用`!important`配合条件注释，或`*+html`选择器。以上是文档中的部分核心CSS知识点，它们涵盖了基础样式应用、选择器的使用、样式优先级、元素隐藏方法以及CSS在不同浏览器间的兼容处理。对于前端开发者来说，熟练掌握这些知识是提升项目质量和效率的关键。

一介青烟小生

粉丝: 117
资源: 18

前端面试必备：CSS选择器优先级与隐藏元素技巧

前端开发笔试题汇总

web前端研发工程师笔试题(选择题带答案)

CSS+DIV练习题

BAT前端H面试题大全.docx编程资料

前端开发面试题集锦.docx

C语言笔试面试题大全.docx

2024嵌入式软件笔试面试题合集.docx

C-C++语言程序设计笔试面试题20.docx

BAT2018年《80道前端面试题》.docx

搜狗校招产品岗笔试题_互联网 产品经理求职 校招 面试笔试题.docx

最新资源

搜狗校招产品岗笔试题_互联网产品经理求职校招面试笔试题.docx