CSS класса старшинство

Question

Я два класса, один используется специально сюда определенные теги, другие могут быть использованы на любом теге:

a.action_link_2 { 
    display:inline-block; 
} 

.display_none { 
    display:none; 
} 

В некоторых случаях я хочу применить оба эти стили и попробовал это:

<a class="action_link display_none">content</a> 

Однако при визуализации в браузере класс "action_link" имеет приоритет. Я понимаю, что это может быть связано с приоритетом класса CSS, т. Е. С определенными классами тегов. Мой вопрос заключается в том, как сделать этот тег скрытым с помощью этих классов и по-прежнему разрешать класс display_none для любого элемента, чтобы скрыть его?

Answer 1

вы можете просто удалить a из перед классом, а также добавить тело перед дисплеем не имеет класса, чтобы придать ему более высокий приоритет.

.action_link_2 { 
    display:inline-block; 
} 

body .display_none { 
    display:none; 
} 

Answer 2

Вы правы, это потому, что специфика чтения this

Чтобы преодолеть эту проблему, необходимо увеличить специфичность для .display_none класса, когда он присутствует на action_link_2.

Просто добавьте еще одно правило, чуть ниже все это

a.display_none { 
     display:none; 
    } 

Это будет работать, но будет проблема, когда вы пытаетесь добавить класс .display_none к anchor, но нет .action_link_2 класс подарок.

Таким образом, окончательный и лучшим решением было бы использовать:

.action_link_2.display_none { 
    display:none; 
} 

Answer 3

Вы можете попробовать это:

.display_none { display:none !important; }