Как я могу установить класс CSS для всех дочерних элементов?(Угловой 6, Ngx Bootstrap) - PullRequest
Новая
       26

Как я могу установить класс CSS для всех дочерних элементов?(Угловой 6, Ngx Bootstrap)

0 голосов
/ 25 сентября 2018

У меня есть такой класс CSS: 

.panel-mobile-navs > ul > li {
 width:100%
}

И в HTML я использую Ngx-bootstrap для набора вкладок: 

<tabset class="panel-mobile-navs" > ... </tabset>

Так что япри попытке изменить CSS элементов внутри него, когда страница загружается, внутри элемента "tabset" генерируется следующий HTML-код: 

<ul class="nav nav-tabs" ng-reflect-klass="nav" ng-reflect-ng-class="[object 
Object]">
...
<li class="nav-item" ng-reflect-ng-class="nav-item,"> ... </li>

</ul>

Но класс, который я создал, не применим к ulи элементы li, я делаю CSS неправильно?заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 25 сентября 2018

Как насчет использования комбинатора-потомка (.panel-mobile-navs ul li) вместо дочернего комбинатора (.panel-mobile-navs > ul > li)?

Есть документы:

0 голосов
/ 25 сентября 2018

Не используйте селектор потомков, используйте class name, он считается более производительным.Исходя из вашей разметки, что-то вроде этого, вероятно, будет работать: 

// SCSS
.panel-mobile-navs {
    .nav-tabs {
        // styling for ul here
        .nav-item {
            // styling for li here
        }
    }
}

// CSS
.panel-mobile-navs .nav-tabs {
    // styling for ul here
}
.panel-mobile-navs .nav-item {
    // styling for li here
}

Убедитесь, что проверили визуализированные элементы, чтобы увидеть, были ли загружены правила CSS: пример

0 голосов
/ 25 сентября 2018

это правило опирается на структуру DOM, которая должна быть точно TABSET.panel-mobile-navs > UL > LI: 

.panel-mobile-navs > ul > li { ... }

Используемая вами структура может вводить узлы DOM, которые не позволяют правилу работать.Попробуйте нацелиться на класс .nav-item напрямую.

...