将CSS样式应用于子菜单

Question

我正在用CSS更改Wordpress网站上所有产品类别的标题背景。我希望样式应用于父类别中的所有子类别。

例如，我有一个类别"糖果"，得到这个标题图像：

.term-candy .shop-page-title.category-page-title.dark.featured-title.page-title{
background-image: url(PICTURE-URL.png);
background-repeat: no-repeat;
background-size: cover;
}

我希望相同的风格适用于"糖果"的所有儿童类别。例如，"糖果"的子类别之一是"口香糖"。我试着在CSS中添加.term软糖，但我认为这是不对的：

.term-candy .term-gummies .shop-page-title.category-page-title.dark.featured-title.page-title{
background-image: url(PICTURE-URL.png);
background-repeat: no-repeat;
background-size: cover;
}

我每个类别大约有5个以上的子类别，所以为每个子类别写一堆CSS会让一切变得过于混乱。

Answer 1

如果你想让每个具有类".term gummies"的元素与你的".termcandy.shop page title。category page title。dark.featured title。page title"表达式的样式相同，那么你就不能在CSS路径中添加"term gummiies"。

您需要为该类创建一个自己的CSS样式条目，如：

.term-gummies .shop-page-title.category-page-title.dark.featured-title.page-title {
background-image: url(PICTURE-URL.png);
background-repeat: no-repeat;
background-size: cover;
}

您可以通过在一个表达式中添加更多的CSS路径来避免重复，例如：

.term-candy .shop-page-title.category-page-title.dark.featured-title.page-title, 
.term-gummies .shop-page-title.category-page-title.dark.featured-title.page-title {
background-image: url(PICTURE-URL.png);
background-repeat: no-repeat;
background-size: cover;
}