相同类名但不是同级别的最后一个元素,如何将不同的CSS样式应用于具有相同类名的2个元素？...

I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.

I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.

Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?

Can this be done using some kind of if statement condition in CSS?

For example, in 1.html:

Some code

In 2.html:

Some different code

Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?

Once again, I would not like to remove the class name at all, if possible.

Thanks!

解决方案

I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:

Some code

Some different code

You can easily target these:

.mainnav>.classone {}

.wrapper>.classone {}

Or if the parent html has a class:

Some code

Some code

.ancestor1 .classname {}

.ancestor2 .classname {}

Obviously this depends on where in the html they might be.