在网页开发中，多页面场景下常常需要让子页面复用父页面已经定义好的css样式，避免重复编写相同的样式代码。根据子页面和父页面的关联方式不同，实现样式继承的方法也有所区别，下面分别介绍几种常见的实现方案。
通过公共CSS文件复用样式
如果父页面和子页面是独立的同源页面，最基础的方式是将父页面中需要被继承的样式提取到公共的css文件中，然后分别在父页面和子页面的<head>标签内引入这个公共文件，这样两个页面都会应用相同的样式规则。
父页面和子页面的引入方式一致，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>父页面</title>
<link rel="stylesheet" href="common.css">
</head>
<body>
<div class="common-style">父页面内容</div>
</body>
</html>
公共样式文件common.css的内容：
.common-style {
color: #333;
font-size: 16px;
padding: 10px;
border: 1px solid #eee;
}
iframe嵌入子页面时的样式传递
如果子页面是通过<iframe>标签嵌入到父页面中的，由于iframe内部的文档是独立的上下文，默认不会继承父页面的样式，此时需要通过JavaScript将父页面的样式传递给子页面。
首先父页面中定义需要传递的样式，并在iframe加载完成后执行传递逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>父页面</title>
<style>
.parent-style {
color: #ff0000;
font-weight: bold;
}
</style>
</head>
<body>
<iframe id="childFrame" src="child.html"></iframe>
<script>
// 等待iframe加载完成
document.getElementById('childFrame').addEventListener('load', function() {
const iframeDoc = this.contentDocument || this.contentWindow.document;
// 获取父页面的所有style标签内容
const parentStyles = document.querySelectorAll('style');
parentStyles.forEach(styleTag => {
// 创建新的style标签插入到子页面的head中
const newStyle = iframeDoc.createElement('style');
newStyle.textContent = styleTag.textContent;
iframeDoc.head.appendChild(newStyle);
});
// 也可以传递link引入的外部样式
const parentLinks = document.querySelectorAll('link[rel="stylesheet"]');
parentLinks.forEach(linkTag => {
const newLink = iframeDoc.createElement('link');
newLink.rel = 'stylesheet';
newLink.href = linkTag.href;
iframeDoc.head.appendChild(newLink);
});
});
</script>
</body>
</html>
子页面child.html的内容不需要额外引入样式，加载后会自动应用父页面传递过来的样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<div class="parent-style">子页面内容，会继承父页面的parent-style样式</div>
</body>
</html>
使用CSS变量实现样式共享
如果只需要传递部分样式变量，比如主题色、字体大小等，可以使用css自定义属性（css变量）的方式，将变量定义在父级根元素上，子页面只要能访问到这个根元素的变量定义就可以使用。
如果是同源的独立页面，可以在公共样式中定义根变量：
:root {
--primary-color: #1890ff;
--font-size-base: 14px;
}
子页面引入公共样式后，就可以直接使用这些变量：
.child-title {
color: var(--primary-color);
font-size: var(--font-size-base);
}
如果是iframe场景，也可以通过JavaScript将父页面的css变量设置到子页面的根元素上：
// 父页面中iframe加载完成后执行
const iframeDoc = document.getElementById('childFrame').contentDocument;
const rootStyle = iframeDoc.documentElement.style;
// 获取父页面的根变量并赋值给子页面
rootStyle.setProperty('--primary-color', getComputedStyle(document.documentElement).getPropertyValue('--primary-color'));
rootStyle.setProperty('--font-size-base', getComputedStyle(document.documentElement).getPropertyValue('--font-size-base'));
注意事项
- 跨域的iframe无法访问彼此的文档内容，因此跨域场景下不能通过JavaScript传递样式，只能通过公共样式文件的方式实现样式复用。
- 传递样式时要注意样式优先级，如果子页面有同名样式，可能会覆盖父页面传递过来的样式，需要根据实际需求调整选择器的权重。
- 如果父页面的样式很多，传递所有样式可能会影响子页面的加载性能，建议只传递子页面需要使用的样式内容。