css直接子元素怎么用,如何使用CSS选择器覆盖父 - 子元素之间的样式？

hei！ 我想修改WordPress的导航菜单和这里的导航菜单的HTML部分：如何使用CSS选择器覆盖父 - 子元素之间的样式？

Primary Menu

Skip to content

• Recipes
• Wine
• Cocktails

，这里是控制菜单项的悬停背景色的CSS部分：

.primary-navigation li:hover > a,

.primary-navigation li.focus > a {

background-color: #24890d;

color: #fff;

}

我想每个菜单项有悬停他们的个人背景颜色和尝试下面的CSS，但它没有工作：

.primary-navigation .recipes li:hover > a,

.primary-navigation .recipes li.focus > a {

background-color: #e5ebd5;

color: #fff;

}

.primary-navigation .wine li:hover > a,

.primary-navigation .wine li.focus > a {

background-color: #8d89a1;

color: #fff;

}

.primary-navigation .cocktails li:hover > a,

.primary-navigation .cocktails li.focus > a {

background-color: #85b0ad;

color: #fff;

}

请告诉我什么我在这里做错了，什么才是正确的做法呢？

PS：我是否也必须删除当前正在控制悬停时所有菜单项的背景颜色的原始css部分，还是有办法覆盖它？

感谢和问候，

希亚姆·辛格

+0

你试过了！重要吗？ background-color：＃85b0ad！important;颜色：#fff！重要;等等 –

+0

是的，我已经尝试过，但那并没有工作。 –

+0

尝试作为选择器：.primary-navigation li.recipes:hover，通过这种方式，您可以选择具有食谱类的li元素。目前，您正在选择食谱类中的李元素 –