这是我的CSS块:
:global {
table, .table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font-size: 0.8em;
font-family: var(--font-family-roboto);
font-weight: normal;
letter-spacing: .25px;
&.fixed {
table-layout: fixed;
}
&.disabled {
opacity: 0.5;
}
> thead {
border-bottom: 1px solid var(--grey-light);
}
> thead th {
color: var(--blue);
text-transform: uppercase;
font-family: var(--font-family-simplon);
font-weight: bold;
letter-spacing: 1px;
text-align: left;
line-height: 12px;
span {
vertical-align: top;
}
}
> thead th,
> tfoot td,
> tbody td {
padding: 5px;
word-wrap: break-word;
vertical-align: middle;
white-space: pre;
&:last-child,
&:first-child {
padding-left: 20px;
}
}
> tfoot {
background-color: var(--grey-lighter);
font-weight: var(--font-weight-bold);
letter-spacing: 1.25px;
text-transform: uppercase;
}
> caption {
text-align: left;
font-size: 1.2em;
margin-bottom: 15px;
padding: 0 2px;
}
}
}
stylelint抱怨:
39:5 ✖ Expected selector ":global table > thead th" to come before selector ":global .table > thead th" no-descending-specificity
41:5 ✖ Expected selector ":global table > tbody td" to come before selector ":global .table > tfoot td" no-descending-specificity
47:7 ✖ Expected selector ":global table > tbody td:last-child" to come before selector ":global .table > tfoot td:last-child" no-descending-specificity
48:7 ✖ Expected selector ":global table > thead th:first-child" to come before selector ":global .table > thead th:last-child" no-descending-specificity
48:7 ✖ Expected selector ":global table > tfoot td:first-child" to come before selector ":global .table > tfoot td:last-child" no-descending-specificity
48:7 ✖ Expected selector ":global table > tfoot td:first-child" to come before selector ":global .table > tbody td:last-child" no-descending-specificity
48:7 ✖ Expected selector ":global table > tbody td:first-child" to come before selector ":global .table > tfoot td:last-child" no-descending-specificity
48:7 ✖ Expected selector ":global table > tbody td:first-child" to come before selector ":global .table > tbody td:last-child" no-descending-specificity
48:7 ✖ Expected selector ":global table > tbody td:first-child" to come before selector ":global .table > tfoot td:first-child" no-descending-specificity
似乎它要我分割table
和.table
声明,但这只会复制样式。不确定如何保持代码DRY并满足stylelint。有什么想法吗?
这些错误可以在这里复制https://stylelint.io/demo/。
答案 0 :(得分:0)
使用stylelint作者确认此行为为as intended:
我认为该规则的行为与记录一致。它比较了desugared CSS,例如
table > thead th:first-child
的特异性为0,1,3,而.table > thead th:last-child
的特异性为0,2,2。因此源顺序和特异性顺序不对齐。 desugared CSS具有交织的类选择器和元素选择器。该规则旨在警告这些。我可以想到两个选项,要么是重构,要么它们没有交织,要么使用
/* stylelint-disable .. */
命令注释关闭此代码块的规则。
在这种情况下,唯一可行的解决方案是重构代码或关闭规则。我选择以后。