互联网大厂面试题解析：CSS选择器与优先级

187 浏览量更新于2024-09-08 收藏 274KB PDF 举报

"这是一份关于BAT（百度、阿里巴巴、腾讯）等大型互联网公司面试题的总结，涵盖了前端开发中常见的CSS相关知识，旨在帮助求职者准备面试，提高通过率。" 在BAT等顶级互联网公司的面试中，对于前端开发者的考察往往涉及到CSS的基础知识和深入理解。以下是部分CSS相关知识点的详细解析： 1. **设置DOM的CSS样式**： - **外部样式表**：通过`<link>`标签引入外部CSS文件，方便统一管理和更新样式。 - **内部样式表**：在HTML文档的`<head>`标签内使用`<style>`标签定义CSS，适用于单个页面的样式控制。 - **内联样式**：直接在HTML元素内使用`style`属性定义样式，这种方式具有最高优先级，但不推荐大量使用，因为它降低了代码的可维护性。 2. **CSS选择器**： - **派生选择器**：如`div p`，选择`div`内的所有`p`元素。 - **ID选择器**：使用`#`标识，如`#myID`，每个ID在一个文档中只能出现一次。 - **类选择器**：使用`.`标识，如`.myClass`，一个类名可以应用于多个元素。 - **属性选择器**：如`[type="button"]`，根据元素属性进行选择。 - **后代选择器**：使用空格，如`div .myClass`，选择`div`内的所有`.myClass`元素。 - **群组选择器**：使用逗号分隔，如`p, div, #myID`，同时选择所有匹配的元素。 - **优先级**：ID选择器>类选择器>标签选择器，如果有同级别的选择器，后面的会覆盖前面的。 3. **隐藏DOM元素**： - `display: none;`：完全从布局中移除元素，元素不占用空间。 - `visibility: hidden;`：元素仍然占据空间，但内容不可见。 - 另外，可以通过设置宽高为0、透明度为0或负的`z-index`值来达到视觉上的隐藏效果。 4. **超链接状态问题**： - CSS中的链接伪类顺序问题，正常顺序应为`L-V-H-A`（link, visited, hover, active）。如果访问过链接后`hover`和`active`样式不再生效，可能是因为顺序错误，应确保`hover`在`visited`之后，`active`在`hover`之后。 5. **CssHack**： - CSS Hack是为了针对不同浏览器的CSS解析差异而采取的一些特殊写法，例如针对IE6的`_height`，或者`*width`等。这种做法虽然可以解决浏览器兼容性问题，但不推荐使用，因为它们可能导致代码混乱且不易维护。更好的解决方案是使用条件注释、浏览器检测库或渐进增强/优雅降级策略。这些知识点对于前端开发者来说至关重要，理解和掌握它们能帮助你在面试中表现出色，并在实际工作中解决各种CSS相关的难题。在准备面试时，不仅要熟记这些概念，还要结合实践，通过编写代码来加深理解。

1.有哪项方式可以对一个 DOM 设置它的 CSS 样式？

•外部样式表，引入一个外部 css 文件

•内部样式表，将 css 代码放在 <head> 标签内部

•内联样式，将 css 样式直接定义在 HTML 元素内部

2.CSS 都有哪些选择器？

•派生选择器（用 HTML 标签申明）

•id 选择器（用 DOM 的 ID 申明）

•类选择器（用一个样式类名申明）

•属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）

除了前 3 种基本选择器，还有一些扩展选择器，包括

•后代选择器（利用空格间隔，比如 div .a{ }）

•群组选择器（利用逗号间隔，比如 p,div,#a{ }）

那么问题来了，CSS 选择器的优先级是怎么样定义的？

基本原则：

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越

高。

复杂的计算方法：

•用 1 表示派生选择器的优先级

•用 10 表示类选择器的优先级

•用 100 标示 ID 选择器的优先级

•div.test1 .span var 优先级 1+10 +10 +1

•span#xxx .songs li 优先级 1+100 + 10 + 1

•#xxx li 优先级 100 +1

那么问题来了，看下列代码，<p>标签内的文字是什么颜色的？。

CSS Code 复制内容到剪贴板

1. <style>

2. .classA{ color:blue;}

3. .classB{ color:red;}

4. </style>

5. <body>

6. <p class='classB classA'> 123 </p>

7. </body>

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p

class='classB classA'>中的先后关系无关。

3.CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？

最基本的：

下载后可阅读完整内容，剩余7页未读，立即下载

qq_43439416

粉丝: 1
资源: 9

互联网大厂面试题解析：CSS选择器与优先级

bat各大算法面试题

最新各互联网BAT等笔试面试真题复习资料

Python后端面试题手册集锦关于Python的面试题23页BAT大厂互联网面试题.pdf

BAT互联网公司校招面试题.rar

BAT及各大互联网公司2014前端笔试面试题：HTML

BAT等互联网公司校招面试题

BAT及各大互联网公司2014前端笔试面试题：JavaScript篇

BAT及各大互联网公司2014前端笔试面试题–JavaScript篇

BAT互联网Java面试题汇总.pdf

BAT 1000道互联网Java工程师面试题

最新资源