如何更改锚标记内title属性的样式？

您无法设置默认浏览器工具提示的样式。但是您可以使用javascript创建自己的自定义HTML工具提示。

无法设置本机工具提示的样式。

话虽如此，您可以使用一些库来在元素悬停时显示样式浮动层（而不是本机工具提示并取消显示它们），而几乎不需要修改代码...

a[title="My site"] {
    color: red;
}

这也适用于您要添加的任何属性，例如：

的HTML

<div class="my_class" anything="whatever">My Stuff</div>

的CSS

.my_class[anything="whatever"] {
    color: red;
}

看到它的工作原理：http : //jsfiddle.net/vpYWE/1/

我在这里找到了答案：http : //www.webdesignerdepot.com/2012/11/how-to-create-a-simple-css3-tooltip/

我自己的代码是这样的，我已经更改了属性名称，如果您维护属性的标题名称，最终将在同一文本的两个弹出窗口中看到，另一个变化是悬停时我的文本显示在暴露的文本下方。

.tags {
  display: inline;
  position: relative;
}

.tags:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: -34px;
  color: #fff;
  content: attr(glose);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}

.tags:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 0 6px 6px 6px;
  bottom: -4px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

<a class="tags" glose="Text shown on hovering">Exposed text</a>

定制工具提示模式的jsfiddle 在这里

它基于CSS定位和pseduo类选择器

在MDN文档中检查伪类的跨浏览器支持

    <!-- HTML -->
<p>
    <a href="http://www.google.com/" class="tooltip">
    I am a 
        <span> (This website rocks) </span></a>&nbsp; a developer.
</p>

    /*CSS*/
a.tooltip {
    position: relative;
}

a.tooltip span {
    display: none;    
}

a.tooltip:hover span, a.tooltip:focus span {
    display:block;
    position:absolute;
    top:1em;
    left:1.5em;
    padding: 0.2em 0.6em;
    border:1px solid #996633;
    background-color:#FFFF66;
    color:#000;
}

CSS不能更改工具提示的外观。它取决于浏览器/操作系统。如果您需要其他内容，则将鼠标悬停在元素上时，必须使用Javascript生成标记，而不是使用默认的工具提示。

这是一个如何做的例子：

a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

似乎实际上存在一个纯CSS解决方案，仅需要css attr表达式，生成的内容和属性选择器（这表明它可以回溯到IE8）：

a[title]:hover:after {
  content: attr(title);
  position: absolute;
}

资料来源：https : //jsfiddle.net/z42r2vv0/2/

使用来自@ViROscar的输入更新：请注意，尽管我在上面的示例中使用了“ title”属性，但没有必要使用任何特定属性；实际上，我的建议是使用“ alt”属性，因为很有可能无法从CSS中受益的用户可以访问该内容。

再次更新，我没有更改代码，因为“ title”属性基本上是指“ tooltip”属性，将重要文本隐藏在仅悬停时才可访问的字段内可能不是一个好主意。有兴趣使此文本可访问的“ aria-label”属性似乎是最适合此属性的地方：https : //developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute