8、样式的继承、应用及优先级

来源：互联网发布：农业数据库编辑：程序博客网时间：2024/06/05 12:48

1、样式的继承

子元素覆盖和继承父元素的样式，其中：

1. 如果父元素有，子元素没有，子元素继承父元素的样式；

2. 如果父元素有，子元素也有，子元素覆盖父元素的样式。

<!DOCTYPE html>

<htmllang="en">

<head>

<title>样式的继承</title>

<style>

color: red;

font-size: 18px;

}

color: blue;

font-family: "黑体";

}

</style>

</head>

<body>

<p><b>样式的继承</b></p>

</body>

</html>

执行结果：blue、18px、黑体；

其中:

子元素<b>中的”color:blue”覆盖父元素<p>中的”color:red”;

子元素<b>继承父元素中的” font-size: 18px”;

子元素<b>自身” font-family: "黑体”得到保留。

2、应用多个类样式：

程序的执行先后为优先级，后执行的覆盖前执行的（程序的执行顺序为从上倒下）。

<!DOCTYPE html>

<htmllang="en">

<head>

<title>应用多个类样式</title>

<style>

.first{

color: blue;

font-size: 36px;

}

.second{

color: red;

font-family: "楷体";

}

</style>

</head>

<body>

<p class="firstsecond">应用多个类样式</p>

</body>

</html>

执行结果：red、36px、楷体；

其中：

second中的” color:red;”覆盖了first中的“color: blue;”；

first中的” font-size:36px;”和second中的” font-family: "楷体”得到保留。

3、样式的优先级和权重叠加

3.1、样式的优先级：

1. id样式>class样式>标签样式；

2. 行内样式>内部式样式>外部式样式；

<!DOCTYPE html>

<htmllang="en">

<head>

<title>样式的优先级</title>

<style>

color: blue;

font-size: 18px;

font-family: "黑体";

}

.first{

color: grey;

font-size: 36px;

}

#second{

color: red;

}

</style>

</head>

<body>

<p class="first"id="second">样式的优先级</p>

</body>

</html>

执行结果：red、36px、黑体；

其中<p>为标签样式，first为class样式，second为id样式，即second>first>p，所以：

second中的” color:red;”覆盖了”first ”中的“color: red;”p中的“color: blue;”。

first中的“font-size:36px;”覆盖了p中的“font-size: 18px;”。

3.2、强制优先级

!important声明具有最高优先级

<!DOCTYPE html>

<htmllang="en">

<head>

<title>强制优先级</title>

<style>

color: blue !important;

}

.first{

color: red;

}

.second{

color: ;

}

</style>

</head>

<body>

<p class="firstsecond">强制优先级</p>

</body>

</html>

执行结果：blue；

3.3、权重叠加：

权重值由小到大排序为：

标签

类

直接

important

权重

100

1000

10000

<!DOCTYPE html>

<htmllang="en">

<head>

<style>

body p{

color: red;

font-size: 36px;

}

color: blue;

font-family: "楷体";

}

</style>

</head>

<body>

</body>

</html>

执行结果：red、36px、楷体；

其中：body的权重为1，p的权重也为1，即”body p”的权重2。所以：

body p中的” color:red”未被p中的” color: blue”覆盖；

body p中的” font-size:36px;”和p中的“font-family: "楷体";”保留。

----------------------------------------------------

本文均为学习笔记，仅供个人参考。

阅读全文

0 0