Удалить все границы на всех панельных сетках, не относящихся к таблицам данных

Question

Мне нужно скрыть все границы всех PanelGrids с помощью простых лиц. Следующий код удаляет границы для всех PanelGrids и dataTables (простые 5+):

.ui-panelgrid tr, .ui-panelgrid td {
    border: none;
}

Мне нужен этот эффект только в PanelGrids. После этого и мне нужно знать, как отображать границы только в некоторых PanelGrids

Answer 1

Ваши селекторы CSS имеют "широкий". Они влияют на все <tr> а также <td> теги, которые являются потомками .ui-panelgridвключая все, что находится в таблице, находящейся в ячейке панели, в качестве потомков таблицы, которая делает данные доступными. Таким образом, вы должны сделать ваши селекторы более конкретными (читайте о специфичности CSS на mozdev) и сделать так, чтобы они предназначались только для определенного уровня.

Используйте, например,

.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell {
     border: none;
}

Это только цели <tr>это внуки .ui-panelgrid и его прямой <td> дети.

Если вы не хотите, чтобы это применялось ко всем групповым панелям, вам придется использовать styleClass, указанный в комментарии выше @BhavinPanchani. Но вместо того, чтобы явно добавлять границы с помощью класса, вы предотвращаете применение вышеупомянутой CSS.

.ui-panelgrid:not(.keepBorder) > * > tr, .ui-panelgrid:not(.keepBorder) > * > tr > td.ui-panelgrid-cell {
     border: none;
}

Просто добавьте keepBorder Класс PanelGrid, который вы хотите сохранить границы. Я не проверял эту последнюю вещь, но с небольшим испытанием вас;

Смотрите также

• Могу ли я написать селектор CSS, выбирающий элементы, НЕ имеющие определенного класса?