我正在处理一个全栈项目，该项目以某种方式在我的锚元素上加载不一致的CSS样式。使用Javascript，我正在做如下操作：
recordData.forEach(record => {
let a = help.createElement('a');
let text = record.jobTitle + " (" + record.deptName + ", " + record.subDeptName + ")-" + record.email;
a.textContent = text;
a.href = `/frontend/contractorForm/contractorForm.html`;
a.addEventListener('click', function(event) {
sessionStorage.clear();
sessionStorage.setItem('record', JSON.stringify(record));
}, false);
parent.appendChild(a);
}
这样做的想法是，尽管我有一个单一的HTML表单"；模板"；创建后，我可以通过存储在sessionStorage中的值填充contractorForm.html中的值。以下是我的锚标签前端视图，我还附上了当我点击其他视图时会发生什么的图像。问题是，当我点击前端的锚标签时，这就是我得到的。我的contractorForm.html的CSS基本上是display:flex; justify-content:center。但如图所示，只有第一个锚点链接有效。
我已经检查和验证了：CSS页面在查看Devtools时确实加载，禁用和清除缓存，将?version={random number}附加到.htmlhref上，更改Devtools上的样式以查看它是否有效(而且确实有效(，更改背景色(它非常有效(，在引导链接后加载我的CSS代码，检查路径和链接(均正确(
这里唯一的问题是我的display:flex很简单，就是不起作用。任何帮助或想法都将不胜感激！非常感谢。
anchortaghtml查看
第一个主持人点击查看
第二个主持人点击查看
- 修复了它-如果您有CSS问题，请确保您正确引用了父级
我的CSS以前是这样的：
#contractor-form-section {
width: 50rem;
}
#contractor-form只是包装表单元素，我的DOM结构看起来是这样的：
<body>
<div id="contractor-form-border">
<section id="contractor-form-section">
<h1>...</h1>
<form>
</form>
</section>
</div>
</body>
- 本质上，我的CSS指的是
#contractor-form-section而不是#contractor-form-border。切换到这个基本上解决了问题