英文:
How to style first table cell in Vanilla Extract?
问题
我正在尝试在Vanilla Extract中创建一个圆角的<tbody>
,但很难理解如何选择特定的子元素。
如何选择tbody tr:first-child td:first-child
?
table {
border-collapse: separate;
}
tbody td {
border-width: 5px;
border-color: red;
border-style: solid;
}
tbody tr:first-child td:first-child {
border-color: black;
color: white;
background-color: red;
border-radius: 1rem 0 0 0;
}
<table>
<thead>
<tr>
<td>Wong</td>
<td>Loo</td>
<td>See</td>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Son</td>
<td>Woo</td>
<td>Bee</td>
</tr>
<tr>
<td>Tom</td>
<td>Soon</td>
<td>Tree</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="2">$1 million</td>
</tr>
</tfoot>
</table>
请注意,以上是你提供的代码和文本的翻译部分。
英文:
I am trying to make a rounded <tbody>
in Vanilla Extract but having a hard time understanding how to select specific children.
How does one select tbody tr:first-child td:first-child
?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
border-collapse: separate;
}
tbody td {
border-width: 5px;
border-color: red;
border-style: solid;
}
tbody tr:first-child td:first-child {
border-color: black;
color: white;
background-color: red;
border-radius: 1rem 0 0 0;
}
<!-- language: lang-html -->
<table>
<thead>
<tr>
<td>Wong</td>
<td>Loo</td>
<td>See</td>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>Son</td>
<td>Woo</td>
<td>Bee</td>
</tr>
<tr>
<td>Tom</td>
<td>Soon</td>
<td>Tree</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="2">$1 million</td>
</tr>
</tfoot>
</table>
<!-- end snippet -->
答案1
得分: 0
以下是您要翻译的内容:
"So it turns out globalStyle
works to achieve this:
export const topLeftRounded = style({});
globalStyle(`${topLeftRounded}:first-child td:first-child`, {
borderRadius: "1rem 0 0 0",
});
<tr className={`${topLeftRounded}`}>
<td>
This would be
</td>
</tr>
<tr className={`${topLeftRounded}`}>
<td>
rendered in a loop
</td>
</tr>
<tr className={`${topLeftRounded}`}>
<td>
but only the first td would apply the style
</td>
</tr>
All four corners
Would look something like this
const topLeftRounded = style({});
const topRightRounded = style({});
const bottomLeftRounded = style({});
const bottomRightRounded = style({});
globalStyle(`${topLeftRounded}:first-child td:first-child`, {
borderRadius: "0.5rem 0 0 0",
});
globalStyle(`${topRightRounded}:first-child td:last-child`, {
borderRadius: "0 0.5rem 0 0",
});
globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
borderRadius: "0 0 0 0.5rem",
});
globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
borderRadius: "0 0 0.5rem 0",
});
export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;
英文:
So it turns out globalStyle
works to achieve this:
export const topLeftRounded = style({});
globalStyle(`${topLeftRounded}:first-child td:first-child`, {
borderRadius: "1rem 0 0 0",
});
<tr className={`${topLeftRounded}`}>
<td>
This would be
</td>
</tr>
<tr className={`${topLeftRounded}`}>
<td>
rendered in a loop
</td>
</tr>
<tr className={`${topLeftRounded}`}>
<td>
but only the first td would apply the style
</td>
</tr>
All four corners
Would look something like this
const topLeftRounded = style({});
const topRightRounded = style({});
const bottomLeftRounded = style({});
const bottomRightRounded = style({});
globalStyle(`${topLeftRounded}:first-child td:first-child`, {
borderRadius: "0.5rem 0 0 0",
});
globalStyle(`${topRightRounded}:first-child td:last-child`, {
borderRadius: "0 0.5rem 0 0",
});
globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
borderRadius: "0 0 0 0.5rem",
});
globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
borderRadius: "0 0 0.5rem 0",
});
export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论