Question

如果已经提出这个问题，我会提前道歉，但无论如何我都会提到它。基本上我一直在研究HTML文档的问题。我为每个不同的链接设置了span标签中链接的规则，因为我希望它们具有不同的文本修饰属性，并且似乎不应用它们。这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title> MSCC Software </title>
    <link type="text/css" rel="stylesheet" href="mscccss.css">
  </head>
  <body> <!-- I will do an early apology if there is any bad code -->
    <div id="header">
      <p id="topline"> MSCC Software </p> 
      <p id="bottomline"> www.mscc.com </p>
    </div>
    <div id="sidebar"> 
      <span id="google"> <a href="http://www.google.com"> Google</a> </span>
      <span id="example"> <a href="http://www.example.com"> Example </a> </span>
      <span id="debt"> <a href="http://www.usadebtclock.org"> Debt </a> </span>
    </div>
    <div id="content">
      <p> Happy Holidays </p>
      <img src="http://res.freestockphotos.biz/pictures/12/12626-illustration-of-a-decorated-christmas-tree-pv.png"  />
      <p> From MSCC! </p>
    </div>
    <p id="credit"> Created By PharellPharell </p>
  </body>
</html>

现在我的CSS：

    body{
    height: 970px;
    background-color: rgba:(223,223,223,80%);
    font-family: Verdana;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 3%;
    margin-left: 3%;
}


#header{
    height: 12%;
    border: solid red;
    background-color: rgb(127,0,0);
    border-radius: 25px;
    text-align: center;
    color: #FFFA7C;
    margin-bottom: 15px;
}

#topline{
    font-size: 30px;
    margin-bottom: 0px;
}


#bottomline{
    font-size: 20px;
}

#sidebar{
    height: 75%;
    width: 15%;
    border: solid red;
    border-radius: 25px;
    background-color: rgb(127,0,0);
    text-align: center;
    padding-right: 25px;
    display: inline-block;
    float: left;
}

#google{
    font-size: 25px;
    color: #EC00BC;
    text-decoration: none;
    display: block;
    padding-bottom: 10px;
}

#example{
    font-size: 25px;
    color: #EC00BC;
    text-decoration: overline;
    display: block;
    padding-bottom: 10px;
}

#debt{
    font-size: 25px;
    color: rgb(7,239,20);
    text-decoration: none;
}

#content{
    height: 75%;
    width: 77%;
    background-color: rgba(0,119,31,0.9);
    border: solid rgb(127,0,0);
    border-radius: 25px;
    color: rgb(127,0,0);
    font-size: 72px;
    text-align: center; 
    float: right;
} 

img{
    height: 300px;
}

#credit{
    font-size: 40px;
    color: rgb(127,0,0);
    font-family: Arial;
    padding-left: 550px;
}

所以是的，基本上就是这样。我无法弄清楚该怎么办，如果我犯了一个愚蠢的错误，我道歉。帮助将不胜感激，

非常感谢！

顺便说一句。有趣的事实 - PharellPharell是我的GitHub用户名，如果你想找我，你可以在那里找到我。

Answer 1

我认为您应该定位a代码，而不仅仅是它们所包含的span。例如：

#google a{
    text-decoration:none;
}

Answer 2

另一种方法是从所有网站上的链接中删除文本修饰，这将允许更具体的规则优先。

a {
  text-decoration: none;
}

CSS-文本装饰问题

2 个答案: