前端面试必备：CSS选择器优先级与隐藏元素技巧
需积分: 10 173 浏览量
更新于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在不同浏览器间的兼容处理。对于前端开发者来说，熟练掌握这些知识是提升项目质量和效率的关键。
2022-04-06 上传
2022-10-25 上传
一介青烟小生
- 粉丝: 117
- 资源: 18
我的内容管理
展开
最新资源
- CoreOS部署神器：configdrive_creator脚本详解
- 探索CCR-Studio.github.io: JavaScript的前沿实践平台
- RapidMatter：Web企业架构设计即服务应用平台
- 电影数据整合：ETL过程与数据库加载实现
- R语言文本分析工作坊资源库详细介绍
- QML小程序实现风车旋转动画教程
- Magento小部件字段验证扩展功能实现
- Flutter入门项目：my_stock应用程序开发指南
- React项目引导：快速构建、测试与部署
- 利用物联网智能技术提升设备安全
- 软件工程师校招笔试题-编程面试大学完整学习计划
- Node.js跨平台JavaScript运行时环境介绍
- 使用护照js和Google Outh的身份验证器教程
- PHP基础教程：掌握PHP编程语言
- Wheel：Vim/Neovim高效缓冲区管理与导航插件
- 在英特尔NUC5i5RYK上安装并优化Kodi运行环境
