0

我正在尝试将样式应用于 html 文档中的一个锚点。但是，我尝试使用 [title] 尝试将 css 样式应用于该元素，但没有任何反应。为什么这行不通。对于如何使用这种格式的样式，我将不胜感激。谢谢

html代码

<div class="col_2">
       <img src="img/blueman.png" width="70" height="70" class="img_left imgshadow" alt="" />
       <p class="newsSpace"><a href="#" title="logout">Signout</a></p>
   </div>

CSS代码

a[title] {

      font-size: 24px;
      font-family: Verdana, Geneva, sans-serif;
      /* border-bottom:1px solid #777777; */
      }

主菜单代码

#menu li a {
    color: #000000;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    outline: 0 none;
    text-decoration: none;
}
4

1 回答 1

2

您编写的选择器应该可以工作，事实上，正如您从其他评论和答案中看到的那样，它在单独使用时确实有效。

您的 CSS 不起作用的最可能原因是您的 CSS 中的其他内容被优先应用。CSS 对选择器有严格的优先顺序，编写一个优先级高于a[title].

我建议查看浏览器开发工具（即 Firebug 等）中的元素，以确定对其应用的样式以及选择器。

如果我是对的，你会看到a[title]样式在那里，但是被划掉了，因为其他样式也被应用了，它们具有更高的优先级。

这是一篇描述CSS 优先顺序的文章。

我可以建议四种方法来解决这个问题：

  1. 调整您的a[title]选择器，使其具有比其他选择器更高的优先级。这通常意味着使其更精确，例如.newsSpace>a[title]。

  2. 调整其他选择器，使它们具有较低的优先级。

  3. 添加!important到样式的末尾，以强制浏览器给予它们最大的优先级。（这是“速赢”选项，但应被视为不得已的手段；使用!important通常意味着您在其他地方做错了事）

  4. 更改您的 HTML 以赋予元素自己的类或 ID，并将其用于您的选择器而不是a[title].

希望有帮助。

[编辑]

OP 在下面评论了更新的小提琴链接，我现在可以看到问题：

好的，谢谢更新链接。我现在可以#menu li div a[title]在 CSS 代码中看到。

使用 Chrome 开发工具 (F12) 查看有问题的元素，我可以看到所有样式都已成功应用于您的Signout元素。但是，该font-size属性被 覆盖#menu li:hover div a，由于:hover.

由于该元素仅在悬停时可见，因此解决方案似乎很简单：只需将相同的:hover属性添加到#menu li div a[title]应用于其他选择器的属性。

所以改成#menu li:hover div a[title]

这又是您的小提琴，对其进行了简单的更改：http: //jsfiddle.net/TrScN/3/

于 2013-06-15T14:04:48.537 回答