Как очистить все стили от дочернего элемента?

Question

Я работаю с выпадающим меню, но у меня возникают проблемы с удалением определенных стилей из подменю. Родительский элемент имеет значение border-right: 1px, но я не хочу, чтобы у ребенка была какая-либо граница, а установка border: 0px ничего не делает. Есть ли способ очистить все унаследованные стили от чего-то?

EDIT: Хорошо, вот некоторый код, что я пробовал:

parent { 
 
    border-right: 1px solid lightgrey; 
 
    } 
 

 
parent child { 
 
    border: 0px 0px 0px 0px !important; 
 
    }

На данный момент я думаю, что я просто создать новый идентификатор, чтобы обойти что бы ни в результате чего мой код не работает.

2nd Edit: Нет, создание идентификатора или класса тоже не сработало. Этот код ДЕЙСТВИТЕЛЬНО хочет эту границу. , ,

3rd Редактировать: ОК, вот jsfiddle. По какой-то причине list-style-type: none не работает над скрипкой, но работает в моем собственном коде. , , странно.

4th Edit: Ana указал на проблему со списком в стиле, я упустил это при копировании кода. Но проблема с границей все еще существует. Я изменил цвет на красный, чтобы было легче видеть.

Окончательный Редактировать: Ана ответила на это! Я был dum-dum и применял border: 0px к UL вместо IL, где он принадлежит. Спасибо Ана!

Answer 1

Добавить! Важно для стилей. Итак, ваш новый css будет границей: 0px! Important;

Answer 2

Попробуйте использовать это, чтобы применить CSS только для непосредственных детей

#parent > li 

Если он получает по наследству, попробуйте использовать! Важно переопределить родительский элемент CSS

Answer 3

Для того, чтобы очистить унаследованные стили вы должны переопределить правила, применяя более конкретное правило по интересующему элементу. Читайте на "css specificity"

div { 
    border: 1px solid red; 
} 


div.child { 
    border: 0; 
}