Less 少嵌套规则&

由于我的评论，我添加了.vmiddle、.vmiddle td、.vmiddle th在我的例子中不起作用，因为我使用的是引导，它定义了.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、.table thead>tr>td、.table tfoot>tr>td和垂直对齐：top

优先

我想执行以下css：

.vmiddle,
table.vmiddle thead tr td,
table.vmiddle tfoot tr td,
table.vmiddle tbody tr td,
table.vmiddle thead tr th,
table.vmiddle tfoot tr th,
table.vmiddle tbody tr th,
table thead.vmiddle tr td,
table tbody.vmiddle tr td,
table tfoot.vmiddle tr td,
table thead.vmiddle tr th,
table tbody.vmiddle tr th,
table tfoot.vmiddle tr th,
table thead tr.vmiddle td,
table tbody tr.vmiddle td,
table tfoot tr.vmiddle td,
table thead tr.vmiddle th,
table tbody tr.vmiddle th,
table tfoot tr.vmiddle th,
table thead tr td.vmiddle,
table thead tr th.vmiddle,
table tbody tr td.vmiddle,
table tbody tr th.vmiddle,
table tfoot tr td.vmiddle,
table tfoot tr th.vmiddle {
  vertical-align: middle;
}

不知何故，我让它与以下规则一起工作：

.vmiddle {
    vertical-align:middle;
    & {
        table& {
            & thead , tfoot, tbody {
                tr, {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        thead&, tbody&, tfoot& {
            table & {
                tr {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        tr& {
            thead &, tbody &, tfoot & {
                table & {
                    td, th {
                        vertical-align: middle;
                    }
                }
            }
        }

        td&, th& {
            tr & {
                thead &, tbody &, tfoot & {
                    table & {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}

但实际上看起来比标准溶液更复杂：D

---

有没有更简单的方法来执行此操作而不定义垂直对齐：中间5次？

看起来您没有正确使用“&”选择器

发件人：

&combinator-当您希望创建嵌套选择器时使用它 连接到其父选择器，而不是作为 后代这对于伪类尤其重要，如 ：悬停和：聚焦

例如：

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

将输出

.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

但在你的情况下，你甚至不需要使用它

编辑：

关于下面注释中提到的特殊性问题，只需在根表元素上添加一个类，特殊性问题就会消失。因此，如果我们称之为calss.表：

减：

---

看起来您没有正确使用“&”选择器

发件人：

&combinator-当您希望创建嵌套选择器时使用它 连接到其父选择器，而不是作为 后代这对于伪类尤其重要，如 ：悬停和：聚焦

例如：

.bordered {
  &.float {
    float: left;
  }
  .top {
    margin: 5px;
  }
}

将输出

.bordered.float {
  float: left;
}
.bordered .top {
  margin: 5px;
}

但在你的情况下，你甚至不需要使用它

编辑：

关于下面注释中提到的特殊性问题，只需在根表元素上添加一个类，特殊性问题就会消失。因此，如果我们称之为calss.表：

减：

---

在大多数情况下，您应该能够缩短这些长css规则。在某些情况下，它不起作用，但通常应该避免不必要的长选择器，以获得更好的性能和可读性。有系统地减少规则的示例：

任何thead、tbody、tfoot、tr、th和td始终位于表格中，您可以删除表格选择器部分

.vmiddle,
.vmiddle thead tr td,
.vmiddle tfoot tr td,
.vmiddle tbody tr td,
.vmiddle thead tr th,
.vmiddle tfoot tr th,
.vmiddle tbody tr th,
thead.vmiddle tr td,
tbody.vmiddle tr td,
tfoot.vmiddle tr td,
thead.vmiddle tr th,
tbody.vmiddle tr th,
tfoot.vmiddle tr th,
thead tr.vmiddle td,
tbody tr.vmiddle td,
tfoot tr.vmiddle td,
thead tr.vmiddle th,
tbody tr.vmiddle th,
tfoot tr.vmiddle th,
thead tr td.vmiddle,
thead tr th.vmiddle,
tbody tr td.vmiddle,
tbody tr th.vmiddle,
tfoot tr td.vmiddle,
tfoot tr th.vmiddle {
  vertical-align: middle;
}

任何tr、th和td都将始终位于THAD、tbody或tfoot中，您可以移除它们。现在许多规则都是相同的，也将它们删除

.vmiddle,
.vmiddle tr td,
.vmiddle tr th,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle th,
tr.vmiddle th,
tr.vmiddle th,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle {
  vertical-align: middle;
}

任何th和td始终是tr的子项，删除tr。再次删除所有重复项

.vmiddle,
.vmiddle td,
.vmiddle th,
td.vmiddle,
th.vmiddle {
  vertical-align: middle;
}

td.vmiddle和th.vmiddle已包含在.vmiddle中

---

在大多数情况下，您应该能够缩短这些长css规则。在某些情况下，它不起作用，但通常应该避免不必要的长选择器，以获得更好的性能和可读性。有系统地减少规则的示例：

任何thead、tbody、tfoot、tr、th和td始终位于表格中，您可以删除表格选择器部分

.vmiddle,
.vmiddle thead tr td,
.vmiddle tfoot tr td,
.vmiddle tbody tr td,
.vmiddle thead tr th,
.vmiddle tfoot tr th,
.vmiddle tbody tr th,
thead.vmiddle tr td,
tbody.vmiddle tr td,
tfoot.vmiddle tr td,
thead.vmiddle tr th,
tbody.vmiddle tr th,
tfoot.vmiddle tr th,
thead tr.vmiddle td,
tbody tr.vmiddle td,
tfoot tr.vmiddle td,
thead tr.vmiddle th,
tbody tr.vmiddle th,
tfoot tr.vmiddle th,
thead tr td.vmiddle,
thead tr th.vmiddle,
tbody tr td.vmiddle,
tbody tr th.vmiddle,
tfoot tr td.vmiddle,
tfoot tr th.vmiddle {
  vertical-align: middle;
}

任何tr、th和td都将始终位于THAD、tbody或tfoot中，您可以移除它们。现在许多规则都是相同的，也将它们删除

.vmiddle,
.vmiddle tr td,
.vmiddle tr th,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle td,
tr.vmiddle th,
tr.vmiddle th,
tr.vmiddle th,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle,
tr td.vmiddle,
tr th.vmiddle {
  vertical-align: middle;
}

任何th和td始终是tr的子项，删除tr。再次删除所有重复项

.vmiddle,
.vmiddle td,
.vmiddle th,
td.vmiddle,
th.vmiddle {
  vertical-align: middle;
}

td.vmiddle和th.vmiddle已包含在.vmiddle中

---

仅仅.vmiddle、.vmiddle td、.vmiddle就足够了吗？在我看来，所有其他规则都是不必要的，并且已经包含在其中，除非你有其他更具体的选择器来覆盖它。确切地说，我使用的是引导，它定义了.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、.table thead>tr>td、.table tbody>tr>td、，.表tfoot>tr>td，垂直对齐：顶部；这是一个先例，我认为这可能是一个罕见的情况下使用！应该考虑到重要的问题。或者，如果你找不到任何其他解决方案，那么就使用第一个css版本，它看起来比不太容易阅读。仅仅.vmiddle、.vmiddle td、.vmiddle就足够了吗？在我看来，所有其他规则都是不必要的，并且已经包含在其中，除非你有其他更具体的选择器来覆盖它。确切地说，我使用的是引导，它定义了.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、.table thead>tr>td、.table tbody>tr>td、，.表tfoot>tr>td，垂直对齐：顶部；这是一个先例，我认为这可能是一个罕见的情况下使用！应该考虑到重要的问题。或者，如果你没有找到任何其他解决方案，就直接使用第一个css版本，它看起来比不太容易阅读。我同意，但由于特殊性，我必须使用所有父选择器，因为像bootstrap这样的框架定义了.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、.table thead>tr>td、.table tbody>tr>td、，.表tfoot>tr>td，垂直对齐：顶部；我同意，但由于特殊性，我必须使用所有父选择器，因为像bootstrap这样的框架定义.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、，

---

.表THAD>tr>td、.表tbody>tr>td、.表tfoot>tr>td垂直对齐：顶部；我同意，但由于特殊性，我必须使用所有父选择器，因为像bootstrap这样的框架定义了.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、.table thead>tr>td、.table tbody>tr>td、.table tfoot>tr>td和垂直对齐：top@所以在你的表的根上定义一个类，比如.table，特殊性问题就会消失。。。不幸的是，bootstrap使用了class table，我正在考虑根table元素的另一个名称，但我不知道它的好名称是什么：我同意，但由于特殊性，我必须使用所有父选择器，因为像bootstrap这样的框架定义了.table thead>tr>th、.table tbody>tr>th、.table tfoot>tr>th、，.表THAD>tr>td、.表tbody>tr>td、.表tfoot>tr>td垂直对齐：顶部@所以在你的表的根上定义一个类，比如.table，特殊性问题就会消失。。。不幸的是，bootstrap使用class表，我正在考虑根表元素的另一个名称，但我不知道什么是它的好名称：D