在表中编写显示为带有填充块的锚点的语义正确方法是什么？

发布于 2024-11-28 06:33:07 字数 1009 浏览 0 评论 0原文

html 如下：

<table>
    <thead>
        <th><a href="...">Number</a></th>
        <th><a href="...">Description</a></th>
    </thead>
    <tbody>
        <td><a href="...">1234</a></td>
        <td>... description</td>
    </tbody>
</table>

现在向 table a { display: block; 添加填充；内边距：5px；当我想向 td 的 table td { padding: 5px; } 添加相同的填充时，会导致问题}。也许我已经用完了填充物？

我通过多种方式解决了这个问题： 1234 然后css 仅适用于 th 元素，不适用于 td 元素。我还添加了一个 class="nolink"，但我觉得这种方法比使用描述其内容的类更具语义性。

这一切都来自于CSS（我熟悉的）中的问题，没有办法说，以一种方式设置所有td的样式除非锚点是后代。我注意到 CSS3 中的 :not 选择器，但我不确定我是否理解在这种情况下如何使用它？

更新：问题确实是填充被添加到带有锚标记的单元格中两次

我没有很好地解释实际问题，请参阅：

http://cssdesk.com/VCtfN

将鼠标悬停在链接上时您会注意到填充。

原文

Here's the html:

<table>
    <thead>
        <th><a href="...">Number</a></th>
        <th><a href="...">Description</a></th>
    </thead>
    <tbody>
        <td><a href="...">1234</a></td>
        <td>... description</td>
    </tbody>
</table>

Now adding padding to table a { display: block; padding: 5px; } causes problems when I want to also add the same padding to the td's table td { padding: 5px; }. Maybe I'm over using the padding?

I've worked around it in a number of ways by doing: <th><a href="...">1234</a></th> and then the css only applies to th elements and not td's. And I've also added a class="nolink", but I feel that the th methodology is a bit more semantic than using a class describing its content.

This all comes from the problem that in CSS (that I'm familiar with), there is no way to say, style all td's one way unless an anchor is a descendant. I noticed the :not selector in CSS3, but I'm not sure I understand how to use it in this case?

Update: The problem really is that the padding is added twice to cells with an anchor tag

I didn't explain the actual problem very well, please see this:

http://cssdesk.com/VCtfN

You'll notice the padding when hovering over the links.

分享到QQ

分享到微博