详解CSS继承特性和层叠特性

来源：懂视网责编：小采时间：2020-11-27 18:52:08

详解CSS继承特性和层叠特性

详解CSS继承特性和层叠特性:一、继承特性：1、学过Java和C++的都注意到，属于父亲的protected字段或方法肯定会被孩子所继承，而CSS也具备此特性，看下面的例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

推荐度：

点击下载本文 文档为doc格式

导读详解CSS继承特性和层叠特性:一、继承特性：1、学过Java和C++的都注意到，属于父亲的protected字段或方法肯定会被孩子所继承，而CSS也具备此特性，看下面的例子： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

一、继承特性：

1、学过Java和C++的都注意到，属于父亲的protected字段或方法肯定会被孩子所继承，而CSS也具备此特性，看下面的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS的继承性演示</title>
<style type="text/css">
body
{
color:red;
}
</style>

</head>

<body>
<div>
CSS的继承性演示
<ul>
<li>首页</li>
<li>简介</li>
<li>联系</li>
</ul>
</div>
</body>
</html>

2、对于这个HTML来讲，div是body的儿子，ul是div的儿子，li是ul的儿子，无论div、ul还是li均是body的后代，其层次关系如下图：

body

|——div （其内容：CSS的继承性演示）

|——ul

|——li （其内容：首页、简介、联系）

3、对于这个文件定义了一个body标记选择器，把颜色值设置为红色，如下：

body
{
color:red;
}

4、使用浏览器打开这个html文件，会发现无论是div的内容(CSS的继承性演示)还是li的内容（首页、简介、联系）均是以红色字体显示，这也说明body的后代自动继承了它的特性。

5、HTML的效果如下，其中的虚框是div的范围：

二、层叠特性：

1、网页中的某个元素很有可能会被若干个选择器所修饰，这样就造成了选择器的冲突，那么到底是以哪个选择器为准呢？只要记住如下优先级即可：行内选择器 > ID选择器 > 类选择器 > 标记选择器

2、举例：

（1）定义mycss.css文件

.red
{
color:red;
}

.purple
{
color:purple;
}

#blue
{
color:blue;
}

#yellow
{
color:yellow;
}

（2）定义myhtml.htm文件，部分主要内容如下：

<head>

</head>

<body>

<p>这是一个文本</p>
<p class="red">这是带类别选择器的文本</p>
<p id="blue" class="red">这是带ID和类别选择器的文本</p>
<p style="color:orange;" id="blue">这是带行内和ID选择器的文本</p>
<p class="purple red">这是带两个类别选择器的文本</p>
<p id="yellow red">这是带两个ID选择器的文本</p>

</body>

（3）效果：

详解CSS继承特性和层叠特性