在我的标题中添加锚“<a></an>”使其消失答案

【问题标题】：Adding anchor '<a></a>' to my heading makes it dissapear在我的标题中添加锚“<a></an>”使其消失
【发布时间】：2017-07-29 01:05:07
【问题描述】：

我的原始 HTML 代码看起来像这样

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
    <link rel="stylesheet" href="css\style.css">
</head>
</body>
<div class = "container">

    <h1> MY HEADING </h1>

    <p>Website text</p>
</div>

我把它改成了

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
    <link rel="stylesheet" href="css\style.css">
</head>
</body>
<div class = "container">

    <h1><a href = "index.html"> MY HEADING </a></h1>

    <p>Website text</p>
</div>

CSS 看起来像这样：

h1 {
    font-family: "Courier New";
    font-size: 600%;
    color: darkorange;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url(../images/rough-texture.png);
}

在我得到一个漂亮的大橙色纹理标题之前，现在我得到一个带有几个白点的小区域。

我似乎无法弄清楚是什么原因造成的。

【问题讨论】：

你的 CSS 规则重复了，并不是说层叠样式是个大问题，但是请修复它并提供其他影响锚点等的 CSS 规则。
@Sqnkov 很好发现。一定是复制和粘贴错误。我已更正此问题，但仍无济于事。
把你的内容放在<body>里面而不是在

标签： html css

【解决方案1】：

您可以在 h1 锚点内为锚点 a 添加另一个特定规则，例如：

h1 a{
    color: darkorange;
    text-decoration: none;
}

希望这会有所帮助。

h1{
    font-family: "Courier New";
    font-size: 200%;
    color: darkorange;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    display: block;
    text-align: center;
    margin: 0;
    display: block;
    -webkit-mask-image: url("http://ghostlypixels.com/wp-content/uploads/2014/06/vector-line-texture.png");
}

h1 a{
    color: darkorange;
    text-decoration: none;
}

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
</head>
</body>
<div class = "container">

    <h1> MY HEADING </h1>

    <p>Website text</p>
</div>
And I changed it to

<!DOCTYPE html>
<head>  
    <title> MDMX Music </title>
</head>
</body>
<div class = "container">

    <h1><a href = "index.html"> MY HEADING </a></h1>

    <p>Website text</p>
</div>

【讨论】：

谢谢。原来我有一个关于锚的规则。颜色和文字装饰也有帮助！
注意：a 标签及其在浏览器默认样式中的不同状态有总是通用 CSS 规则。

【解决方案2】：

试试这样：

<a href = "index.html"><h1> MY HEADING</h1></a>

【讨论】：

我已经尝试过了，在查找之后发现这是一种不太正确的做法。 stackoverflow.com/questions/5341451/…
@mdemont 那已经过时了。在 HTML5 中，a 是一个块元素。