前端面试必备:CSS选择器优先级与隐藏元素技巧
"该文档包含了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在不同浏览器间的兼容处理。对于前端开发者来说,熟练掌握这些知识是提升项目质量和效率的关键。
- 粉丝: 99
- 资源: 15
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展