Html CSS：在单个表格中设置所有链接样式的正确方法是什么？

CSS: What is the correct way to style all links within a single table?

提问by Brian Webster

My intent is to style all anchor tags within a table in a particular way.

我的意图是以特定方式为表格中的所有锚标记设置样式。

The anchor tags may be contained within various containers inside the table, including:

锚标签可能包含在表格内的各种容器中，包括：

• table cells
• divs
• paragraphs

• 表格单元格
• div
• 段落

My initial attempt:

我的初步尝试：

.FooterTable a:link, a:visited, a:hover, a:active
{
    color: blue;   
}

This is occurring within a CMS (DotNetNuke), so pretty much everything has a style specified in a CSS class somewhere. However, I believe my CSS Class above should take effect.

这发生在 CMS (DotNetNuke) 中，因此几乎所有内容都在某个 CSS 类中指定了样式。但是，我相信我上面的 CSS Class 应该会生效。

Here's my markup:

这是我的标记：

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="FooterTable">
    <tr>
        <td width="23%" align="center">
            <a href="http://www.test.com/pages/45_contact_us.cfm">Our Company</a>
        </td>
        <td width="19%" align="center">
            <a href="http://www.test.com/pages/6_test_test_test_test.cfm">Need Help?</a>
        </td>
        <td width="37%" align="center">
            <a href="http://www.test.com/pages/187_test_test.cfm">Shop</a>
        </td>
        <td width="21%" align="center">
            <a href="http://www.test.com/pages/42_test_test.cfm">Partners</a>
        </td>
    </tr>
</table>

Current Behavior

当前行为

All text on the site is specified to be some sort of gray. That gray color is simply not being overridden with the above CSS Class.

网站上的所有文本都被指定为某种灰色。上面的 CSS 类没有覆盖那种灰色。

What is the correct way to set the style of all links within a table, such as this?

设置表格中所有链接的样式的正确方法是什么，例如这样？

回答by Nicole

You have the correct idea, though you do need to make sure that .FooterTableprecedes eacha, as each comma separates full selectors.

您有正确的想法，但您确实需要确保.FooterTable在each之前a，因为每个逗号分隔完整的选择器。

Ideally, you could go with the simple:

理想情况下，您可以使用简单的方法：

.FooterTable a, .FooterTable a:hover {
    color: blue;   
}

But, you seem to be running into a CSS selector specificity/precedence problem. Read that answer for more details, but basically, existing CSS rules being applied may "more specific" and therefore take precedence over your fairly simply .FooterTable a:linkrule.

但是，您似乎遇到了CSS 选择器特定性/优先级问题。阅读该答案以获取更多详细信息，但基本上，正在应用的现有 CSS 规则可能“更具体”，因此优先于您相当简单的.FooterTable a:link规则。

To verify this, I isolated just the HTML/CSS from this question into a sample page, and the blue color in the CSS rule in fact does apply to the links.

为了验证这一点，我仅将这个问题中的 HTML/CSS 隔离到示例页面中，并且 CSS 规则中的蓝色实际上确实适用于链接。

To fix this problem, you have two options:

要解决此问题，您有两个选择：

1. Ideally, global CSS rules should not be overly specific. If you can fix them to be less specific, you will be better all around.
2. If you can only addCSS rules, not take away from those already applied elsewhere, you will need to be more specific. See my answer and other answers on StackOverflow for details on how selector precedence works.

1. 理想情况下，全局 CSS 规则不应过于具体。如果您可以将它们修复为不那么具体，那么您会更好。
2. 如果您只能添加CSS 规则，而不是从其他地方已经应用的规则中删除，您将需要更加具体。有关选择器优先级如何工作的详细信息，请参阅我在 StackOverflow 上的答案和其他答案。

回答by jeroen

It would seem that another selector has a higher specificity than yours. If you have firefox and firebug installed, you can easily see what selector is being used and use that information to modify yours.

似乎另一个选择器比您的选择器具有更高的特异性。如果您安装了 firefox 和 firebug，您可以轻松查看正在使用的选择器并使用该信息来修改您的选择器。

Apart from that, .FooterTable a:link, a:visited, a:hover, a:activeis equal to:

除此之外，.FooterTable a:link, a:visited, a:hover, a:active等于：

.FooterTable a:link,
a:visited,
a:hover,
a:active

so .FooterTabledoes not apply to the last 3 selectors.

所以.FooterTable不适用于最后 3 个选择器。

回答by Blender

In case your CSS is overridden by the CMS's CSS, you can make it !important:

如果您的 CSS 被 CMS 的 CSS 覆盖，您可以这样做!important：

.FooterTable > tr > td > a:link,
.FooterTable > tr > td > a:visited,
.FooterTable > tr > td > a:hover,
.FooterTable > tr > td > a:active
{
    color: blue;   
}

You have to write out .FooterTableeach time, as CSS isn't that dynamic.

你必须.FooterTable每次都写出来，因为 CSS 不是那么动态。

回答by sdleihssirhc

First of all, that selector isn't doing what you want it to. Commas separate entirely independent selectors. Which means you're targeting four different groups of elements:

首先，该选择器没有按照您的意愿行事。逗号分隔完全独立的选择器。这意味着您的目标是四组不同的元素：

1. .FooterTable a:link— All aelements in their normal, un-hovered, un-visited state that are descendants of any element with a class of FooterTable
2. a:visited— All aelements on the page that have been visited
3. a:hover— All aelements on the page that are being hovered

1. .FooterTable a:link—a处于正常、未悬停、未访问状态的所有元素，它们是具有以下类别的任何元素的后代FooterTable
2. a:visited—a页面上所有被访问过的元素
3. a:hover-a页面上被悬停的所有元素

...and so on. You'll need to duplicate the .FooterTablepart in each comma-separated selector.

...等等。您需要.FooterTable在每个逗号分隔的选择器中复制该部分。

The next problem sounds like a specificity problem. If you told all .FooterTable a:linkelements to have a color of blue, then my guess is you have a more-specific rule somewhere else that tells those links to be a different color. We'll probably need to see more CSS.

下一个问题听起来像是一个特异性问题。如果你告诉所有.FooterTable a:link元素都为蓝色，那么我猜你在其他地方有一个更具体的规则，告诉这些链接是不同的颜色。我们可能需要看到更多的 CSS。

回答by Arjan

The CSS looks correct. If it is not working then it could be overridden by a later style or it could be ignored because of another style or a style marked important.

CSS 看起来是正确的。如果它不起作用，那么它可能会被后来的样式覆盖，或者由于另一种样式或标记为重要的样式而被忽略。

You could use something like FireBug to find out which style is being used.

您可以使用 FireBug 之类的东西来找出正在使用的样式。

回答by ckaufman

.FooterTable a:link, .FooterTable a:visited, .FooterTable a:hover, .FooterTable a:active
{
    color: blue;   
}

if that does not work you may need to add TD

如果这不起作用，您可能需要添加 TD