<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS覆盖TEST</title>
<style>
.b{background-color:green; color:#CCCCCC}
.a .b{background-color:blue}
#a {background-color:green;color:#CCCCCC}
#a #b {background-color:blue}
</style>
</head>
<body>
<div class="a">
<div class="b" style="background-color:red">测试1</div>
</div>
<div id="a">
<div id="b" style="background-color:red">测试2</div>
</div>
</body>
</html>
这段测试代码说明了.b{}影响.a .b{}中的文字颜色，但是没有影响背景颜色。
.b{绿}，a .b{蓝}和div自己的style(红)都设置了背景颜色，但最后只显示红；
去掉style(红)之后编程蓝色；再去掉a .b{蓝}之后才变成绿色。
原因是同样的CSS会被覆盖。浏览器使用样式的顺序为.b{绿}—〉a .b{蓝}—〉style(红)而后面的样式把前面的样式覆盖掉了。而在class和id下效果是同样的。
注：样式最好还是使用class编辑，id具有唯一性，也就是说一张网页不能有重复的id。虽然目前浏览器也支持重复id，但这样会影响js操作。
分享到：
相关推荐
8. **理解层叠性**：理解CSS的层叠规则（Cascade）和继承（Inheritance），合理设置权重，避免不必要的覆盖和冲突。 9. **性能监控**：使用Chrome开发者工具或其他性能分析工具，检查和优化CSS渲染性能，如减少重排...
- **模块化与组件化**：将CSS代码按照功能模块或UI组件进行分类和封装，每个模块或组件应该独立且自包含，这有助于代码的重用和维护。 #### 2. CSS选择器的高效使用 - **选择器简洁性**：优先使用类选择器而非ID...
1. CSS组织：将CSS代码按模块分块，如导航条、按钮、头部等，便于管理和重用。 2. 代码优化：减少冗余代码，避免使用内联样式，尽量将样式写在外部CSS文件中，提高页面加载速度。 3. 兼容性测试：确保代码在各种...
通过上述对CSS属性模块的深入分析，我们可以发现，在选择合适的CSS架构和编写高效CSS代码时，需要考虑到样式的一致性、可维护性、重用性和上下文的特定需求。CSS作为前端开发中不可或缺的技术，其属性模块的掌握程度...
11. **CSS模块化和重用**：引入CSS模块系统如CSS Modules、CSS-in-JS和PostCSS，以及如何通过CSS预处理器实现更高效的代码组织。 12. **CSS性能优化**：探讨如何减少CSS阻塞渲染、优化选择器性能、压缩CSS和利用CSS...
CSS能够让你独立地控制页面的布局和设计，使得网页内容和表现分离，提高了网页的可维护性和可重用性。这个压缩包“css 的帮助和生成器资料”显然为初学者提供了丰富的资源，帮助他们理解和应用CSS。 首先，我们来看...
important`可能导致样式覆盖问题，影响可维护性。只有在必要时才使用，并确保有明确的理由。 8. **利用CSS缓存**：设置合适的HTTP缓存头部，使浏览器能缓存CSS文件，减少后续访问的加载时间。 9. **避免使用@...
高质量的CSS代码通常遵循一定的编码规范，如DRY（Don't Repeat Yourself）原则，避免重复代码，提高代码可维护性和扩展性。分页组件的样式可以封装为可复用的CSS类，方便在项目中多次应用。 6. **实践应用** 在...
面向对象的CSS（Object-Oriented CSS，简称OOCSS）是一种编程思想，旨在提高CSS代码的可重用性和可维护性。OOCSS由Nicole Sullivan于2008年提出，它鼓励将样式与结构分离，创建独立且可复用的模块。这种方法与SMACSS...
通过遵循这些命名规范和注意事项，你可以创建更加整洁、高效的CSS代码，从而提升网页开发的质量和效率。在实际工作中，结合使用这些方法，你的CSS代码将更具可维护性和扩展性，同时降低出错率。记得不断学习和更新...
预处理器可以提升CSS的编写效率，模块化设计则有利于代码的管理和重用，性能优化能确保网站在各种环境下流畅运行，而对浏览器兼容性的考虑则是实际工作中必须面对的问题。 总之，《CSS设计指南（第3版）》是一本...
CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档...通过不断实践和学习，我们可以避免常见的CSS问题，更好地利用CSS来实现网页的视觉效果和布局控制。
2. **内部样式表**：这种情况下，CSS代码写在HTML文档的`<head>`部分，包裹在`<style>`标签中。这样，整个页面可以共享这些样式。例如： ```html p { color: red; } ``` 3. **外部样式表**：CSS代码...
5. **调试工具**：内置或集成浏览器开发者工具，帮助定位和修复样式问题，如元素选择器检查和CSS覆盖分析。 6. **响应式设计**：提供可视化设计界面，便于构建适应不同设备屏幕尺寸的响应式布局。 7. **资源管理**...
10. **CSS变量（CSS自定义属性）**：CSS变量提供了一种在项目中定义和重用值的方式，可以方便地在整个样式表中更新颜色、字体等样式。 以上内容只是《CSS查询手册》中的冰山一角，实际手册会详细讲解每个概念，并配...
以上只是CSS API文档中部分重要知识点的概述，实际文档中通常会包含更多详细信息，如属性值的取值范围、默认值、优先级以及实例代码，以便开发者更好地理解和应用。在日常开发中，熟练掌握这些API能显著提升开发效率...
它们将CSS样式直接写在JavaScript中，结合了JS的动态性和CSS的样式能力，提供了更强大的样式管理方案，但同时也需要权衡性能和代码可读性。 7. **媒体查询与响应式设计** 使用`@media`规则可以为不同设备或屏幕...
设计模式是网页设计中的重复使用元素和代码结构，它们为解决常见问题提供了一套经过验证的方案。在HTML5和CSS3的语境下，设计模式涉及各种布局、文本样式、盒模型应用、定位技巧等方面，每种模式都可以在不同的上...
面向对象CSS（OOCSS）是一种设计模式，鼓励将样式与页面结构分离，通过类名而不是元素ID或标签来应用样式，促进代码的重用和可维护性。 #### CSS 内联元素和块元素 理解CSS中内联元素和块元素的区别对于创建响应式...