如何在Vanilla Extract中为第一个表格单元格添加样式？

huangapple
go评论98阅读模式
英文:

How to style first table cell in Vanilla Extract?

问题

我正在尝试在Vanilla Extract中创建一个圆角的<tbody>，但很难理解如何选择特定的子元素。

如何选择tbody tr:first-child td:first-child？

  1. table {
  2.   border-collapse: separate;
  3. }
  5. tbody td {
  6.   border-width: 5px;
  7.   border-color: red;
  8.   border-style: solid;
  9. }
  11. tbody tr:first-child td:first-child {
  12.   border-color: black;
  13.   color: white;
  14.   background-color: red;
  15.   border-radius: 1rem 0 0 0;
  16. }
  1. <table>
  2.   <thead>
  3.     <tr>
  4.       <td>Wong</td>
  5.       <td>Loo</td>
  6.       <td>See</td>
  7.     </tr>
  8.   </thead>
  9.   <tbody>
  10.     <tr>
  11.       <td>One</td>
  12.       <td>Two</td>
  13.       <td>Three</td>
  14.     </tr>
  15.     <tr>
  16.       <td>Son</td>
  17.       <td>Woo</td>
  18.       <td>Bee</td>
  19.     </tr>
  20.     <tr>
  21.       <td>Tom</td>
  22.       <td>Soon</td>
  23.       <td>Tree</td>
  24.     </tr>
  25.   </tbody>
  26.   <tfoot>
  27.     <tr>
  28.       <td>Total</td>
  29.       <td colspan="2">$1 million</td>
  30.     </tr>
  31.   </tfoot>
  32. </table>

请注意，以上是你提供的代码和文本的翻译部分。

英文:

I am trying to make a rounded &lt;tbody&gt; 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 -->

  1. table {
  2.   border-collapse: separate;
  3. }
  5. tbody td {
  6.   border-width: 5px;
  7.   border-color: red;
  8.   border-style: solid;
  9. }
  11. tbody tr:first-child td:first-child {
  12.   border-color: black;
  13.   color: white;
  14.   background-color: red;
  15.   border-radius: 1rem 0 0 0;
  16. }

<!-- language: lang-html -->

  1. &lt;table&gt;
  2.   &lt;thead&gt;
  3.     &lt;tr&gt;
  4.       &lt;td&gt;Wong&lt;/td&gt;
  5.         &lt;td&gt;Loo&lt;/td&gt;
  6.       &lt;td&gt;See&lt;/td&gt;
  7.       &lt;/tr&gt;
  8.   &lt;/thead&gt;
  9.   &lt;tbody&gt;
  10.     &lt;tr&gt;
  11.       &lt;td&gt;One&lt;/td&gt;
  12.       &lt;td&gt;Two&lt;/td&gt;
  13.       &lt;td&gt;Three&lt;/td&gt;
  14.     &lt;/tr&gt;
  15.     &lt;tr&gt;
  16.       &lt;td&gt;Son&lt;/td&gt;
  17.       &lt;td&gt;Woo&lt;/td&gt;
  18.       &lt;td&gt;Bee&lt;/td&gt;
  19.     &lt;/tr&gt;
  20.     &lt;tr&gt;
  21.       &lt;td&gt;Tom&lt;/td&gt;
  22.       &lt;td&gt;Soon&lt;/td&gt;
  23.       &lt;td&gt;Tree&lt;/td&gt;
  24.     &lt;/tr&gt;
  25.   &lt;/tbody&gt;
  26.   &lt;tfoot&gt;
  27.     &lt;tr&gt;
  28.       &lt;td&gt;Total&lt;/td&gt;
  29.       &lt;td colspan=&quot;2&quot;&gt;$1 million&lt;/td&gt;
  30.     &lt;/tr&gt;
  31.   &lt;/tfoot&gt;
  32. &lt;/table&gt;

<!-- end snippet -->

答案1

得分: 0

以下是您要翻译的内容：

"So it turns out globalStyle works to achieve this:

  1. export const topLeftRounded = style({});
  3. globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  4.   borderRadius: &quot;1rem 0 0 0&quot;,
  5. });
  1. &lt;tr className={`${topLeftRounded}`}&gt;
  2.   &lt;td&gt;
  3.     This would be
  4.   &lt;/td&gt;
  5. &lt;/tr&gt;
  6. &lt;tr className={`${topLeftRounded}`}&gt;
  7.   &lt;td&gt;
  8.     rendered in a loop
  9.   &lt;/td&gt;
  10. &lt;/tr&gt;
  11. &lt;tr className={`${topLeftRounded}`}&gt;
  12.   &lt;td&gt;
  13.     but only the first td would apply the style
  14.   &lt;/td&gt;
  15. &lt;/tr&gt;

All four corners

Would look something like this

  1. const topLeftRounded = style({});
  2. const topRightRounded = style({});
  3. const bottomLeftRounded = style({});
  4. const bottomRightRounded = style({});
  6. globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  7.   borderRadius: &quot;0.5rem 0 0 0&quot;,
  8. });
  10. globalStyle(`${topRightRounded}:first-child td:last-child`, {
  11.   borderRadius: &quot;0 0.5rem 0 0&quot;,
  12. });
  14. globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
  15.   borderRadius: &quot;0 0 0 0.5rem&quot;,
  16. });
  18. globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
  19.   borderRadius: &quot;0 0 0.5rem 0&quot;,
  20. });
  22. export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;
英文:

So it turns out globalStyle works to achieve this:

  1. export const topLeftRounded = style({});
  3. globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  4.   borderRadius: &quot;1rem 0 0 0&quot;,
  5. });
  1. &lt;tr className={`${topLeftRounded}`}&gt;
  2.   &lt;td&gt;
  3.     This would be
  4.   &lt;/td&gt;
  5. &lt;/tr&gt;
  6. &lt;tr className={`${topLeftRounded}`}&gt;
  7.   &lt;td&gt;
  8.     rendered in a loop
  9.   &lt;/td&gt;
  10. &lt;/tr&gt;
  11. &lt;tr className={`${topLeftRounded}`}&gt;
  12.   &lt;td&gt;
  13.     but only the first td would apply the style
  14.   &lt;/td&gt;
  15. &lt;/tr&gt;

All four corners

Would look something like this

  1. const topLeftRounded = style({});
  2. const topRightRounded = style({});
  3. const bottomLeftRounded = style({});
  4. const bottomRightRounded = style({});
  6. globalStyle(`${topLeftRounded}:first-child td:first-child`, {
  7.   borderRadius: &quot;0.5rem 0 0 0&quot;,
  8. });
  10. globalStyle(`${topRightRounded}:first-child td:last-child`, {
  11.   borderRadius: &quot;0 0.5rem 0 0&quot;,
  12. });
  14. globalStyle(`${bottomLeftRounded}:last-child td:first-child`, {
  15.   borderRadius: &quot;0 0 0 0.5rem&quot;,
  16. });
  18. globalStyle(`${bottomRightRounded}:last-child td:last-child`, {
  19.   borderRadius: &quot;0 0 0.5rem 0&quot;,
  20. });
  22. export const rounded = `${topLeftRounded} ${topRightRounded} ${bottomLeftRounded} ${bottomRightRounded}`;

huangapple
  • 本文由 发表于 2023年6月25日 17:15:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/76549711.html
  • css
  • html
  • vanilla-extract
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定