CSS: выберите LI в нескольких родительских классах UL - PullRequest
Новая
       2

CSS: выберите LI в нескольких родительских классах UL

1 голос
/ 06 февраля 2020

Я определил два <ul> класса, px_p и px_s . Теперь я хочу стилизовать все элементы <li>, содержащиеся в элементах <ul class="px_p"> или <ul class="px_s">. Я думал, что ul.px_p, ul.px_s li {} будет работать, но без игры в кости. Я тоже попробовал ul.px_p li, ul.px_s li {}. Проблема заключается в том, что стиль <li> равен 

ul.px_p, ul.px_s li {
  margin: 0.1em;
}

, и .1em применяется ко всему элементу <ul>, а также к вложенным элементам <li>. Я просто хочу элементы <li>, так как <ul> имеет намного больший нижний край, чтобы графически отделить его от следующих элементов. Разница между px_p и px_s в том, что _p является первичным и имеет маркер, в то время как _s вторичен и не имеет маркера, он просто делает отступ больше.

1 Ответ

1 голос
/ 06 февраля 2020

Селектор должен быть таким: 

ul.px_p > li,
ul.px_s > li {
  ...
}

Использование селектора > будет соответствовать только li элементам, родительские элементы которых ul.px_p или ul.px_s.

Это важно, учитывая, что ul.px_p li будет соответствовать любому descendednt li элементу ul.px_s. Это будет включать вложенные элементы, к которым стиль не должен применяться.

В качестве примечания, иногда при работе в браузерах используется кэшированная версия CSS, и сделанные вами изменения могут не отражаться. Принудительное полное обновление sh страницы браузера, которое должно перезагрузить весь контент, используя CTRL + F5.

...