定义级联样式时，每一层之间有空格和没有空格是有区别的，先看下面的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css样式级联定义</title>
<style type="text/css">
.layer1_1 .layer1_2 .layer1_3 {
color: red;
}
.layer2_1 .layer2_1.layer2_2 {
color: blue;
}
</style>
</head>
<body>
<div class="layer1_1">
<div class="layer1_2">
<div class="layer1_3">测试1</div>
</div>
</div>
<div class="layer2_1">
<div>
<div class="layer2_1 layer2_2">测试2</div>
</div>
</div>
</body>
</html>
运行结果都会正常显示红色和蓝色，从结果分析看
有空格时，表示是不同的层（如样式.layer1_1 .layer1_2 .layer1_3），
没有空格时指的是同一层（如样式.layer2_1 .layer2_1.layer2_2）
定义了.layer1_1 .layer1_2 .layer1_3，html中必须有三层样式class才会解析
定义了.layer2_1 .layer2_1.layer2_2，html中必须有两层样式class，并且第二层写成形如"layer2_1 layer2_2"或"layer2_2 layer2_1"才会解析
另外
.layer2_1 .layer2_1.layer2_2 {
color: blue;
}
写成
.layer2_1 .layer2_2 {
color: blue;
}
<div class="layer2_1">
<div>
<div class="layer2_1 layer2_2">测试2</div>
</div>
</div>
也会正确解析的
分享到：
相关推荐
### 级联样式表CSS学习笔记 #### 一、设置CSS的几种方式 在网页设计与开发过程中，级联样式表（Cascading Style Sheets，简称CSS）是一种用来描述HTML文档外观和格式的语言。CSS提供了多种应用方式，以便开发者...
**CSS级联样式表概述** CSS（Cascading Style Sheets）是一种重要的网页设计语言，用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。它允许开发者通过分离内容和表现来实现更加灵活和精细的页面...
我们知道，firefox在众多浏览器中是对css 2高度兼容的一款浏览器，那是我能够编写一个中型b2b网站的时候（并不能说是我遇到过的难题）在禅意花园中看到的一个案例，说的是某个菜单在css中定义了以后只能在firefox中...
接着，我们使用CSS来定义样式： ```css .c_subNav { width: 150px; } .c_subNav a { text-decoration: none; color: #333; } .c_subNav a:hover { color: #f60; } .c_subNav ul ul { position: absolute; ...
6. CSS样式应用：最后，使用CSS确保级联选择器的视觉效果一致且易于使用。 总的来说，这个实例展示了如何结合使用jQuery、JSP、JavaScript和CSS来实现一个功能完善的级联地区选择器，这在网页开发中非常实用，尤其...
**CSS样式案例集大全** 本资源集合是一份全面的CSS样式案例集，旨在帮助开发者深入理解和熟练运用CSS在实际项目中的应用。CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）...
总结来说，实现页面上的级联效果，主要涉及到HTML结构的搭建、CSS样式的编写以及可能的JavaScript交互。对于多级下拉菜单，关键在于理解和掌握菜单的嵌套结构以及如何用CSS控制它们的可见性。同时，利用现有的前端...
HTML负责定义菜单结构，CSS控制样式，JavaScript处理交互逻辑。例如，可以使用`<ul>`和`<li>`标签创建一个多级的无序列表，然后通过CSS的`display`属性控制子菜单的显示与隐藏。当用户悬停在父菜单项上时，...
【CSS样式控制】是网页设计中的重要组成部分，用于定义HTML元素在浏览器中的视觉表现。CSS全称为级联样式表（Cascading Style Sheets），它的主要作用是赋予网页内容丰富的样式，如字体、颜色、背景、布局等。CSS的...
3. CSS样式表的使用，尤其是`:hover`伪类来实现鼠标悬停时的菜单动态效果。 4. HTML结构设计，特别是创建级联菜单的`<ul>`和`<li>`元素。 5. 集成图像资源以提升界面的视觉效果。 通过这个项目，开发者不仅可以学习...
2. CSS样式：为了美观和用户体验，插件会包含CSS样式文件，定义各个元素的样式。 3. JavaScript代码：核心逻辑部分，包括初始化插件、处理用户交互、动态加载数据等功能。 4. 数据源：一般以JSON格式存储城市数据，...
**CSS样式文档** CSS，全称Cascading Style Sheets，是一种用于定义网页中元素呈现方式的语言。CSS2和CSS3是CSS技术的两个主要版本，它们在网页设计和开发中扮演着至关重要的角色。 **CSS2知识点：** 1. **选择器...
在IT行业中，级联（Cascading）是一个广泛使用的概念，尤其在网页设计、样式表语言（CSS）以及数据库设计等领域。在这个特定的场景中，"实现级联效果"可能是指通过编程或配置来创建一种多层交互或依赖的效果。下面...
2. **层叠与继承**：CSS的“级联”特性意味着样式可以来自多个来源，如浏览器默认样式、作者定义样式、用户自定义样式等，它们按照优先级进行层叠。继承则是子元素自动获取父元素某些样式的过程，但不是所有属性都能...
本书的核心内容围绕着如何利用DIV（层）和CSS（级联样式表）进行高效的网页布局与美化展开，旨在帮助读者掌握这一现代网页设计的基础和关键技能。 DIV元素是HTML中的一个块级元素，常被用来作为页面布局的容器，...
**CSS样式表授课PPT** 在网页设计领域，CSS（Cascading Style Sheets）样式表是一种不可或缺的技术，它用于控制网页元素的外观、布局和结构。这个“CSS样式表授课PPT”包含了对这一关键技能的深入讲解，分为两部分...
这个项目可能包含了JavaScript代码、CSS样式以及示例数据，用于演示级联选择器的使用和配置。通过阅读和学习这个项目，你可以更好地理解级联选择器的实现细节，并将其应用到自己的项目中。 ### 5. 总结 级联选择器...
2. `style.css` - CSS样式表，用于定义菜单的外观和行为。 3. `script.js` - JavaScript脚本文件，处理事件监听、DOM操作和Ajax请求。 4. `server-side-script.php`或`.js` - 服务器端脚本，处理数据请求和返回。 ...