`

css样式级联定义

 
阅读更多

定义级联样式时,每一层之间有空格和没有空格是有区别的,先看下面的代码

 

<!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的几种方式 二、样式选择器 1.Html selector 2.Class selector 3.ID selector 4.关联选择器 5.组合选择器 6.伪元素选择器 三、其他 1.注释 2.内层标签会继承外层标签的定义 3.内层标签的重定义...

    CSS样式权重的级联cascade的概念深入理解

    我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以后只能在firefox中...

    css叠层样式大全表

    通过使用CSS样式设置页面的格式,可将页面的内容 与表现形式分离。页面内容存放在HTML文档中,而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内 容与表现形式分离,...

    CSS(Cascading Style Sheet)级联样式表常用术语总结

    CSS(Cascading Style Sheet )级联样式表总结,如果使用CSS不要忘记写DOCTYPE等文档类型定义,接下来详细为您介绍,需要了解的朋友可以参考下

    Qt_用户界面美工基础.rar_QT 样式_qt 界面css_美工_通用界面 qt

    CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则,只要 Web 浏览器遇到一个元素实例,或遇到一个分配给某个特定样式类的元素,该规则就立刻应用属性,而不是将属性逐个分配给页中的每个...

    css-interview-questions:300 多个 CSS 面试问题

    CSS 用于定义网页的样式,包括不同设备和屏幕尺寸的设计、布局和显示变化。 CSS 旨在允许网络专业人员将网站代码的内容和结构与视觉设计分开。 CSS 可用于文档文本样式——例如更改标题和链接的颜色和大小。 它可...

    CSS_compatable_manuals(images).zip

    CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 。样式存储在样式表中,...

    html+css 代码整理

    CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率 。样式存储在样式表中,...

    mystique:用于确定哪些 CSS 样式影响给定元素的工具

    然而,根据定义,CSS 是级联的,并且通过无数的选择器,很难准确地弄清楚哪些样式会影响给定的元素。 此外,浏览器本身会在应用主题 CSS 之前应用一组核心样式。 因此,并非所有列出的属性都是相关的。 为了解决这...

    CSS入门PPT

    CSS(Cascading Style Sheet)级联样式单(层叠样式表) HTML5建议把页面外观交给CSS控制。 优点: 表达效果丰富 (元素样式、精确定位) 文档体积小(重复定义 提高传输速度 节约带宽) 便于信息检索(搜索引擎对...

    CSS3:CSS定义了不合法的注释,并显示了当前的文档结构。 电子邮件的可视化界面,HTML的用户界面

    样式:中性CSS样式,在视觉上可以看到一个新的样式。 床单:有意义的寓言,开放式的门户网站,扩展性的.css常规文件。指标:CSS3 ESENCIAL Contiene LO esencial对aprender acerca德CSS3,desde苏sintaxis basicas

    Qt用户界面美工基础

    在涉及到Qt 部件美工变成的时候首先要掌握CSS 级联样式表级联样式表 (CSS) 包含应用于网页中的元素的样式规则。CSS 样式定义元素的显示方式以及元素在页中的放置位置。可以创建一个通用规则,只要 Web 浏览器遇到一...

    thinkful-html:HTML和CSS简介

    网站由很多东西组成,但是HTML(超文本标记语言)和CSS(级联样式表)是最重要的两个组成部分。 它们共同构成了Internet上每个网页的基础。 想想一辆车。 它也由许多属性组成。 门。 视窗。 轮胎。 座位在HTML的...

    级联样式文件共通样式整理

    CSS Code复制内容到剪贴板 /*&lt;pre&gt;:定义预格式化文本;&lt;code&gt;:用于表示计算机源代码的文本内容; *&lt;fieldset&gt;:可将表单内相关的元素分组;&lt;legend&gt;:为fieldset标签定义标题; *&lt;blockquote&gt;:块应用,会自动增加...

    webpack css加载和图片加载的方法示例

    css加载器 在webpack中,所有的资源(js文件、css文件、模板文件,图片文件...加载css是要两个加载器,一个是style-loader,一个是css-loader样式文件默认加载到head里面。 我们来看一个小例子 |__static   

    关于CSS引入方式的详细见解小结

    概念:CSS称之为层叠样式表或级联样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 作用:CSS以HTML为基础,提供了丰富的功能,而且还可以针对不同的浏览器设置不同的样式。CSS主要用于设置HTML页面中的...

    playing-css-js

    CSS 级联样式表或CSS是用于描述HTML或XML文档表示的样式语言(包括各种基于XML的语言,例如SVG,MathML或XHTML)。 CSS描述了结构化元素应如何在屏幕,纸张,语音或其他媒体上呈现。 CSS是开放式网络的基本语言之一...

    看完不迷糊的 CSS 盒子模型介绍

    CSS (Cascading Style Sheet)可译为“层叠样式表 ”或“级联样式表”,它定义如何显示HTML 元素,用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离,极大提高了工作效率。CSS 假定所有的HTML 文档...

    HTML+CSS精品笔记

    HTML即超文本标记语言,是WWW的描述语言 “层叠样式表”或“级联样式表”,它定义如何显示 HTML 元素,用于控制Web页面的外观

Global site tag (gtag.js) - Google Analytics