HTML+CSS面试题集：伪元素与选择器解析

"本文介绍了CSS的选择器、伪类和伪元素的使用，以及前端开发中的一些基础知识，如HTML语义化、浏览器内核、CSS盒子模型和兼容性问题。同时，提到了HTML标签的作用、CSS的居中方法、定位原理以及预处理器的使用等。" 在前端开发中，CSS（层叠样式表）起着至关重要的角色，它负责网页的布局和样式。CSS的选择器用于精准地选取需要应用样式的元素。这里提到了几种常见的选择器： 1. E[att] 选择器匹配所有具有指定属性att的元素，不考虑属性值。 2. E[att=val] 选择器则匹配att属性值为val的元素。 3. E[att~=val] 选择器用于匹配att属性值中包含多个空格分隔的值，其中有一个值等于val的元素。 4. E[att|=val] 选择器常用于lang属性，匹配att属性值以val开头且由连字号分隔的元素。 伪类是CSS中用于表示元素特定状态的关键字，例如： - :first-child 选择器匹配父元素的第一个子元素。 - :link 匹配未被访问过的链接。 - :visited 匹配已被访问过的链接。 - :active 匹配当前激活（如鼠标点击并按住）的元素。 - :hover 匹配鼠标悬停其上的元素。 - :focus 匹配获得焦点的元素。 - :lang(c) 匹配lang属性值为c的元素。 伪元素如:first-line、:first-letter、:before和:after则允许在元素内容前后插入生成的内容。 此外，文件还涉及了HTML的基础知识，如DOCTYPE的作用，标准模式和兼容模式的区别，行内元素、块级元素和空元素的区分。CSS的导入方式（link与@import）、浏览器内核的理解、HTML语义化的重要性，以及Label标签的作用。CSS的盒子模型在不同浏览器中的差异，选择符的类型和继承性，优先级的计算，居中div的方法，display属性的不同值，position的relative和absolute定位原点，满屏布局的实现，等高列布局，浏览器兼容性问题及其解决方案，以及清除浮动的方法等。 CSS预处理器如Sass、Less等可以提高CSS的可维护性和可扩展性，而CSS优化包括减少选择器复杂度、合理使用CSS Reset、避免使用!important等。浏览器解析CSS选择器时，通常从右向左匹配，先计算元素选择器，再计算属性和伪类选择器。 在实际开发中，处理浏览器的兼容性问题常常需要使用一些hack技巧，例如针对IE低版本的问题。对于CSS的margin和padding，前者更适合控制元素之间的距离，后者则用于设置元素内容与其边框之间的空间。::before和::after伪元素通过双冒号和单冒号区分CSS2和CSS3，它们用于在元素内容前后插入额外内容，例如清除浮动或实现某些视觉效果。 这个资源涵盖了前端开发中CSS选择器、伪类、伪元素的基本概念，以及HTML结构、CSS样式和浏览器兼容性的相关知识，是前端开发者巩固基础和提升技能的重要参考资料。