Добрый вечер всем! Разъясните, пожалуйста, почему, несмотря на то, что правило покраски ячеек в розовый цвет - .formula .column-last - идёт ПОСЛЕ покраски в зелёный -.formula .content, - оно не срабатывает?
.formula {
display: table;
margin: 10px;
width: 500px;
border-collapse: collapse;
}
.formula p {
display: table-caption;
caption-side: bottom;
text-align: center;
margin: 0;
padding: 10px;
font-size: 20px;
}
.formula ul {
display: table-row;
}
.formula li {
display: table-cell;
border: 1px solid #777777;
padding: 5px;
text-align: center;
vertical-align: middle;
}
.formula header {
display: table-header-group;
background-color: #ffffff;
}
.formula .content {
display: table-row-group;
}
.column {
display: table-column;
}
.column-group {
display: table-column-group;
}
.formula .content {
background: #b2fdd0;
}
.formula .column-last {
background: #ffbaba;
}
.formula .content-important {
background: #fffebc;
}
А Вы могли бы мне объяснить, почему именно так: ведь .content и .content-important “превращены” в группы строк и строки. А .column-group, .column-last - это группы столбцов и столбцы… Получается, что строки приоритетнее, раз жёлтая строка .content-important перекрывает даже группы столбцов - зелёную и розовую (частично), в то же время в моём изначальном варианте из-за того, что зелёная часть была задана через строки, столбцы (розовые) не смогли перекрыть строки? Надеюсь, понятно вопрос сформулировал:relaxed: