如何根据div中的h3内容编辑背景

Question

.package {
border: var(--border);
border-radius: var(--border-radius);
background: var(--color-bg-900);
padding: var(--spacing-grid) 0;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.package h3 {
font-size: 1rem;
padding: 0 0 var(--spacing-xs) var(--spacing-grid);
}

<div class="package">
<div class="package__info">
<h3>Bl4ck🎁Gift</h3>
<div class="package__tags">
<span class="tag tag--left tag--700">10.00 EUR</span>
</div>
</div>
# another content here
</div>

如果<h3>标签在<div class="package__info>类中有Bl4ck🎁Gift作为特定内容，我需要更改backgroundCSS标志。我的问题是，如果<h3>标签有特定的内容，我如何更改package类的背景？我知道如何更改背景，但因为这是我第一次使用CSS，我不知道如何在<h3>标签中找到包含Bl4ck🎁Gift内容的特定包。改变这一特定方案背景的最佳方式是什么？我也不知道如何使用javascript来实现它。我想要一个解决方案，从中学习。

我不太确定如何描述这个问题，甚至用我的母语也不知道。我希望你们仍然理解我的意思和我需要什么。如果你能更好地解释，请随意编辑这篇文章。

Answer 1

您可以使用JavaScript检查h3元素的内容，然后相应地设置背景。

const package = document.querySelector(".package");
const h3 = document.querySelector(".package__info h3");
if (h3.innerText === "Bl4ck🎁Gift") {
package.style.background = "red";
}

.package {
border: var(--border);
border-radius: var(--border-radius);
background: var(--color-bg-900);
padding: var(--spacing-grid) 0;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.package h3 {
font-size: 1rem;
padding: 0 0 var(--spacing-xs) var(--spacing-grid);
}

<div class="package">
<div class="package__info">
<h3>Bl4ck🎁Gift</h3>
<div class="package__tags">
<span class="tag tag--left tag--700">10.00 EUR</span>
</div>
</div>
...other content here
</div>.