Question

我是一名年长的大学生（不开玩笑！）现在正在使用HTML2，我觉得我可能错过或错误编写了我的CSS中的内容。但是对于我的生活，经过多次尝试/重新尝试解决问题所在，我无法弄清楚问题。

这里有什么不对......

超链接通常使用＆＃34;链接＆＃34;在CSS中（如在蓝色页面上的未触动链接），＆＃34; hover＆＃34; （当鼠标悬停在它上面时，称之为白色），然后访问＆＃34; （点击链接后，将其称为紫色）。我有5页要链接到我的导航栏。所有链接都会将您带到正确的页面，但不会在视觉上对鼠标做出反应或悬停.5个链接在访问后都不会改变颜色。

如前所述，我尝试过许多不同的事情，但一切都没有改变。

非常感谢任何和所有建议。并保持你们在帮助别人解决问题时所做的出色工作。

PS：这是一项硬件分配，我必须通过http://validator.w3.org/（以及CSS）进行验证，因此解决方案必须遵循W3的可接受指南。

这是我的整个CSS（以防万一我写了可能成为问题的相互矛盾的内容）：

/* Body config */

body { background-color: #000000;
    background-image: url(images/Sunset1.jpg);
    background-repeat: no-repeat; 
    background-attachment: fixed;
    background-position: center; 
    padding-top: 10px;
    font-family: Verdana, Arial, sans-serif;}

/* Heading 1 Style */
h1 { background-position: right; 
    background-repeat: no-repeat; 
    padding-left: 20px; 
    height: 14px; 
    color: #754719; 
    font-family: Georgia, serif; 
    line-height: 120%;}

/* Heading 2 Style for Content heading */
h2 { color: #663311; 
     font-family: Georgia, serif;}

/* Heading 3 Style */
h3 { color: #000033;}

/* Heading 4 Style */
h4 { color: #ffff00;}

/* Definition List */
dl { margin-left: 340px;}

/* Definition Term */
dt { color: #000033;}

/* Config nav */
#nav { height: 45px;
       font-family: Verdana;
       font-size: 25px;
       line-height: 42px;
       background: #DCCAA6;
       word-spacing: 2em;
       padding-left: 30px;
       margin-left: auto; /* Shouldn't these margin-auto lines take care of */
       margin-right: auto; /* centering the NavBar without using text-align:center? */
       text-align:center;} /* I tried it without text-align but it wouldn't center it */

/* All 3 "nav" lines below (commented out), didn't work. It was recommended at:     http://csswizardry.com/2011/01/create-a-centred-horizontal-navigation/ */

/*.nav{
    border:5px solid #ccc;
    border-width:1px 0;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}
.nav li{
    display:inline;
}
.nav a{
    display:inline-block;
    padding:10px;
}*/

/* Config nav hyperlinks */
#nav a { text-decoration: none;}

/* Config nav hyperlinks Pseudo-class */
#nav a:link { color: #e60000;}

#nav a:hover { color: #FFFFFF;}

#nav a:visited { color: #663300;}

/* Config nav unordered list */
#nav ul { list-style-type: none; 
         margin: 0; 
          padding-left: 0;}

/* Banner config */ 
img.displayed { display: block;
          margin-left: auto; 
          margin-right: auto;}

/* Bold Resort Name for span*/
.resort { color: #000033; 
          font-size: 1.2em;}

/* Config content */
#content { background-color: #ffffff;
           margin-top: 0;
     margin-right: 20px;
     margin-bottom: 5px; 
     margin-left: 20px;
     padding-top: 0; 
     padding-right: 20px; 
     padding-bottom: 0;
     padding-left: 20px;}

/* Config images */
#content img, #content video, #content embed { float: left; 
                     padding-right: 20px;}

/* Gallery config */
#gallery { position: relative;}

#gallery ul { list-style-type: none; 
             width: 300px;}

#gallery li { display: inline; 
            float: left; 
      padding: 10px;}

#gallery img { border-style: none; 
              float: none;}

#gallery a { text-decoration: none; 
            font-style: italic; 
            color: #333;}

#gallery span { display: none;}

#gallery a:hover span { display: block;   
                      position: absolute; 
                      top: 10px; 
                      left: 340px; 
                      text-align: center;}  

/* Clear float */
.clear { clear: left;
    text-align: center;
    color: #3D1F00;
    background-color: #ffffff;
    font-family: Comic Sans MS, cursive, sans-serif;}

/* Config unordered lists */
#content ul { list-style-position: inside;}

/* Footer */
#footer { font-size: .70em; 
          font-style: italic; 
          text-align: center;
          padding: 10px;
    clear: both;}

/* Config for page wrapper */
#wrapper { background-color: #E6532E;
     opacity: 0.8; 
     filter: alpha(opacity=80); /* For IE8 and earlier */
     min-width: 960px; 
           -webkit-box-shadow: 5px 5px 5px #828282; 
           -moz-box-shadow: 5px 5px 5px #828282; 
           box-shadow: 10px 10px 40px #995c00; 
           width: 75%; 
           margin-left: auto; 
           margin-right: auto; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#1e1e1e')";}

/* Config table */
table { border: 1px solid #3399cc;
    border-spacing: 0;
    margin: auto;
    width: 600px;}

td, th { border: 1px solid #3399cc;
    padding: 5px;}

/* Config table content */  
td { text-align: center;}

/* Config class */
.text { text-align: left;}

/* Config alternate row color (pseudo-class) */
tr:nth-of-type(even) { background-color: #f5fafc;}

/* Form controls */
label { float: left;
    display: block;
    text-align: right;
    width: 120px;
    padding-right: 20px;}

/* Form input */
input, textarea { display: block;
        margin-bottom: 20px;}

/* Submit button */
#mySubmit { margin-left: 130px;}

form { padding-bottom: 30px;}

更新：

在世界上包含HTML是很有意义的。对不起，我只是不确定我可以包含哪些或多少信息，因为我的原始帖子是在StackOverflow中的HERE，但它不断抛出错误消息，所以我将其重新路由到WebMaster。再次感谢您提供的任何帮助。我将CSS粘贴到CSS下面。我确实纠正了某人在链接，访问和悬停的顺序中注意到的错误。

<!DOCTYPE html>
<!-- CIS233DA - Section# 11491 -->      
<html lang="en">
  <head>
    <title>Sand and Surf : Home</title>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="description" content="Sand and Surf Island Vacations, have Award-winning accommodations specializing in romantic getaways, fun-filled honeymoons, memorable anniversaries, and the most unique vacation of a lifetime.">
    <meta name="keywords" content="Award winning resort, unique, romantic, getaways, beaches, sunsets, star filled skies, secluded, couples, relaxing, fun-filled, vacation, honeymoon, anniversary, world wide, savings">
    <!-- CSS connection to all pages that include this line -->     
    <link href="sand.css" rel="stylesheet" type="text/css">      
    <!-- Begin Site Logo/Banner -->      
    <img class="displayed" src="images/SSLogoBanner.gif" alt="Sand &amp; Surf Logo Banner"/>
  </head>     
  <!-- "Footprints in sand w bright light" (part of Logo/Banner) used without permission from - http://ditchthesad.com/blog/ By: Jen Herlevi -->
  <!-- End Site Logo/Banner -->
  <body>     
  <!-- Begin Wrapper -->     
    <div id="wrapper">
     <!-- Begin Nav Bar -->     
     <div id="nav">
      <a href="index.html">Home</a>      
      <a href="destinations.html">Destinations</a>      
      <a href="VacationPackages.html">Vacation_Packages</a>      
      <a href="ContactUs.html">Contact_Us</a>      
      <a href="design.html">Design</a>     
     </div>      
     <!-- End Nav Bar -->      
     <!-- Begin content -->     
     <div id="content">      
       <!-- Media Controls -->
       <video controls="controls" poster="snorkeling_poster.jpg" width="420" height="340">
         <source src="Snorkeling.mp4" type="video/mp4">
         <embed type="application/x-shockwave-flash" src="Snorkeling.mp4" quality="high" width="320" height="240" title="Sand and Surf Island Vacations">      
       </video>      
       <!-- END Media Controls -->      
       <br>
       <br>     
       <p><span class="resort">Sand and Surf Island Vacations</span> offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.</p>     
      <ul>
        <li>Private yurts with decks overlooking the ocean</li>  
        <li>Activities lodge with fireplace and gift shop</li>  
        <li>Nightly fine dining at the Overlook Cafe</li>  
        <li>Heated outdoor pool and whirlpool</li>  
        <li>Guided hiking tours of the redwoods</li>
      </ul>
      <div class="clear"><hr>      
        <p>Sand and Surf, 12345 N. Sand and Surf Blvd., San Diego, CA. 95555<br>800.555.1234</p>    
      </div><hr>     
      <!-- Begin footer --> 
      <div id="footer">Copyright &copy; 2014 Sand and Surf Island Vacations, L.L.C. All rights reserved<br>
        <a href="mailto:TER2063902@rio.edu">Contact Webmaster</a>
      </div>
      <!-- End footer -->
      <!-- Icon for CSS Validation -->
      <p>
        <a href="http://jigsaw.w3.org/css-validator/check/referer">
          <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
        </p> 
        <!-- Icon for W3/Badge Builder Validation --> 
        <a href="http://www.w3.org/html/logo/"><img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3.png" width="133" height="64" alt="HTML5 Powered with CSS3 / Styling" title="HTML5 Powered with CSS3 / Styling"></a>
      </div>
      <!-- End Content -->
    </div>
    <!-- End Wrapper -->      
  </body> 
</html>

Answer 1

如果您同时包含HTML也会有所帮助，这样我们就可以看到css是否定位了正确的链接等。

我会说尽管首先尝试按住ctrl-F5，这会强制浏览器刷新，这将导致它重新加载你的css包围它使用旧的css可能没有你做过的任何修改。

接下来确保标题中的链接标记中正确包含了css。

接下来请确保css的目标是正确的ID，类等。只需通过更改颜色或其他内容来测试，以确保。

确定包含html，因为这有助于识别问题

Answer 2

我快速浏览了一下你的CSS。除了在div中或id = nav或gallery之类的内容之外，没有更改链接悬停颜色的规范。我测试了你的导航规格，它对我有用。对于一般的链接，你需要一个a：hover而不是.nav或#nav，它们需要div或id =或class =。

那是清楚的吗？只需为一般的链接创建一个没有类或id的a：hover。

我应该补充说，有些浏览器可以帮助解决这个问题。例如，Chrome有它的开发人员工具，这是我用来测试你的CSS并一直使用的工具。如果您没有安装Chrome，除非您的浏览器具有此功能，否则我会建议您使用。

为什么我的超链接不会改变颜色？

2 个答案: