我正在处理两个组件:header.js和footer.js。

我还有两个css文件:header.module.css和footer.module.css。 它们都对a标记使用不同的样式。

我在每个js文件中导入了相应的CSS文件，但是footer.module.CSS中的a样式似乎超过了header.js中的样式，尽管它没有导入。

下面是代码:

header.js

import React from "react"
import { Link } from "gatsby"
import "../styles/header.module.css";

const ListLink = props => (
  <li style={{display: `inline-block`, marginRight: `1rem`, fontSize: '1.15rem', fontWeight: 'bold'}}>
    <Link className="link" to={props.to}>{props.children}</Link>
  </li>
)

footer.js

import React from "react"
import "../styles/footer.module.css";

const FooterLink = props => (
  <li style={{ display: `inline-block`, marginRight: `1rem`, marginBottom:'0rem', fontSize: '1.05rem', fontWeight: 'bold'}}>
    <a href={props.to} target="_blank">{props.children}</a>
  </li>
)

header.module.css

a {
    color: var(--textLink);
    text-shadow: var(--textShadow);
    transition:.2s;
    background-image: var(--bgimage);
}

a:hover {
    color: #da1e11;
    background-image: none;
}

footer.module.css

a{
    color: var(--textLink);
    text-shadow: var(--textShadow);
    transition:.2s;
    background-image: none;
}

a:hover {
    color: #da1e11;
    background-image: none;
}

footer中的background-image属性超过了header中指定的属性。