Question

我正在尝试将样式应用于html文档中的一个锚点。但是，我尝试了[标题]尝试将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;
}

Answer 1

您编写的选择器应该可以正常工作，而且正如您从其他注释和答案中看到的那样，它在隔离使用时确实有效。

CSS最不可能的原因是CSS中的其他内容优先于其应用。 CSS对选择器有严格的优先顺序，编写一个被认为优先于a[title]的选择器非常容易。

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

如果我是对的，你会看到a[title]样式，但是因为其他样式也有优先权而被删除了。

这是一篇描述the CSS order of precedence的文章。

我可以通过四种方式来解决这个问题：

调整您的a[title]选择器，使其优先级高于其他选择器。这通常意味着使其更精确，例如.newsSpace>a[title]。
调整其他选择器以使它们具有较低的优先级。
将!important添加到样式的末尾，以强制浏览器为其指定最大优先级。（这是“快速获胜”选项，但应该被视为最后的选择;使用!important通常意味着你在其他地方做错了什么）
更改HTML，为元素提供自己的类或ID，并将其用于选择器，而不是a[title]。

希望有所帮助。

<强> [编辑]

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

使用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/

[标题]未显示预期结果

1 个答案: