Могу ли я сделать так, чтобы стиль родительского элемента переопределял стиль дочернего элемента с помощью Sass?

avatar
Hanxue
7 апреля 2018 в 23:38
642
1
0

У меня есть таблица, в которую добавляется класс CSS, когда строка или столбец удовлетворяют условию. Класс элемента строки (технически ячейки) <td> переопределяет элемент столбца <tr>.

Это сгенерированный HTML

 <table>
    <tr data-v-5cc42bfc="" item-index="1" render="true" class="row-title-1">
      <td data-v-5cc42bfc="">Ahmad Ortiz Jr.</td>

      <td data-v-5cc42bfc="" class="center aligned column-total">lkulas@example.com</td>

      <td data-v-5cc42bfc="">1</td>

      <td data-v-5cc42bfc="">1992-09-12 00:00:00</td>

      <td data-v-5cc42bfc="">in</td>

      <td data-v-5cc42bfc="">F</td>
    </tr>
  </table>

Код SCSS

.column-total {
  background-color: #e0e0e0;
}
.row-title-1 {
  background-color: #699dcd;
}

И полный воспроизводимый пример на https://codepen.io/hanxue/pen/GxwXdG

Стиль столбца переопределит стиль строки

Table result

Временное решение

Проблему можно решить, используя более конкретный стиль, например:

.row-title-1 {
  background-color: #699dcd;
  .column-total {
    background-color: #699dcd;
  }
}
.row-title-2 {
  background-color: #89b2d8;
  .column-total {
    background-color: #699dcd;
  }
}
.row-title-3 {
  background-color: #a1c7e4;
  .column-total {
    background-color: #699dcd;
  }
}
.column-total {
  background-color: #e0e0e0;
}

Проблема в том, что этот подход не масштабируется и быстро усложняется по мере увеличения количества стилей строк и столбцов.

Вопрос

Есть ли способ для стиля родительского элемента переопределить его дочерний элемент?

Источник
Temani Afif
7 апреля 2018 в 23:45
1

чтобы было ясно, это не переопределение ... но фон td выше фона tr, который отличается и меняет смысл вашего вопроса

Ответы (1)

avatar
Temani Afif
7 апреля 2018 в 23:59
0

Как отмечалось выше, проблема заключается не в переопределении, а в том, что фон элемента ячейки (td) находится выше фона элемента tr. Вот пример, чтобы подтвердить это, используя линейный градиент в качестве фона td

.

table {
  border-collapse:collapse;
}
td {
 padding:20px;
}
.color-tr {
 background:red;
}
.color-td {
 background:linear-gradient(blue,transparent);
}
we can see the red behind the gradient so there is no override
<table>
  <tr class="color-tr">
    <td class="color-td">aaa</td>
    <td>bbb</td>
  </tr>
</table>

Чтобы избежать этого, вы можете использовать настраиваемые свойства (переменные CSS) и рассмотрите возможность установки значения по умолчанию для цвета, который вы хотите применить к td. Поскольку настраиваемые свойства наследуются, вам просто нужно указать их в tr, и они будут использоваться в td вместо свойств по умолчанию.

Вот пример:

table {
  border-collapse:collapse;
  background:#ccc;
}
td {
 padding:20px;
 color:#fff;
}
.color-tr1 {
 --c:blue;
 background:var(--c);
}
.color-tr2 {
 --c:black;
 background:var(--c);
}
.color-td1 {
  background:var(--c,red);
}
.color-td2 {
  background:var(--c,pink);
}
<table>
  <tr class="color-tr1">
    <td class="color-td1">With color</td>
    <td>no color</td>
    <td>no color</td>
    <td>no color</td>
  </tr>
  <tr >
    <td class="color-td1">With color</td>
    <td>no color</td>
    <td class="color-td2">With color</td>
    <td>no color</td>
  </tr>
  <tr >
    <td class="color-td1">With color</td>
    <td>no color</td>
    <td>no color</td>
    <td class="color-td2">With color</td>
  </tr>
  <tr class="color-tr1">
    <td class="color-td2">With color</td>
    <td>no color</td>
    <td>no color</td>
    <td class="color-td1">With color</td>
  </tr>
</table>

Как видите, когда вы определяете background-color для tr, мы устанавливаем пользовательское свойство, которое будет переопределять значение по умолчанию, используемое с td; таким образом, td будет иметь тот же фон.