如何更改箭头的颜色？

Question

I have this site:

http://dl.dg-site.com/

In this site we have a menu arrow gray colored ...

How can I change the color of the white arrows without modifying anything else?

I found this code here ... and do not change color but only arrow

header, 
    nav>ul ul, 
    #magic-line, 
    #topbar.announcement_bar_style_3, 
    #topbar.announcement_bar_style_2, 
    #topbar.announcement_bar_style_1, 
    .testimonial_small p,
    .ABs_pricing-table-2 .ABs_pricebox_feature:last-of-type{
        border-bottom-color:#969696 !important;
    }

Can you help me to solve this problem?

Thanks in advance!

Answer 1

#magic-line {
  border-bottom-color: #fff !important;
}

The !important declaration is required since to override the rule you've shown in your question. Generally you should avoid using ! important .

I suspect this is an off-the-shelf WordPress theme though, and the rule you showed in your question is injected into the page by the theme, so you may not be able to edit it directly. In which case the !important will be required, and you will need to ensure that your new rule appears after the rule that sets the gray border color.

If for some reason you can't load your custom styles after the theme generated styles then you will need a rule that is more specific to ensure it takes precedence, eg

nav #magic-line {
  border-bottom-color: #fff !important;
}