Question

不是网络开发人员，所以我希望如果这个问题没有意义，我会饶恕我。我尝试了很多方法，但由于缺乏CSS的知识，它不适合我。

我有一个包含以下结构的页面

<div id="content">
   <div class="archive">
      <div class="left-archive">
         <h3><a>Main Left tile</a></h3>
        <ul>
         <li><a link>Link title</a></li>
        </ul>
      </div>
      <div class="right-archive">
          <h3><a>Main Right tile</a></h3>
        <ul>
         <li><a link> Link title</a></li>
        </ul>
      </div>
   </div>
 </div>

现在我的意图是，当页面首次显示时，所有链接都应加下划线，当我将鼠标悬停在它们上时text-decoration应为none。我写这个css代码

.archive  ul li a:hover{
  text-decoration:none;
  outline:medium none;
}
.archive   ul li  a:visited {
  color:#4280B4;
  text-decoration:underline;
}

 .archive h3 a:visited{
  color:#CE4F00;
  text-decoration:underline;
}


.archive   h3 a:hover{
  color:#3C78A7;
  text-decoration:none;
}

但这不起作用，它从同一个CSS文件中选择以下CSS条目

a:link, a:visited {
    color: #3c78a7;
    text-decoration:none
    }

a:hover, a:active {
    color: #3c78a7;
    text-decoration:underline;
    }

老实说，我所做的只是简单的命中和试验，没有任何逻辑。任何人都可以指导我走正确的道路，我将如何实现正确的行为。

提前致谢

Answer 1

可能是因为您没有为一般锚标记链接编写css属性。像

这样的东西

.archive ul li a 
 {
   text-decoration:underline;
 }

 .archive ul li a:hover
 {
   text-decoration:none;
 }

然后当你盘旋时，你会得到预期的效果。

Answer 2

您必须在定义时按特定顺序指定样式：

link

visited

active

hover

修改：回复您的评论。编写CSS的物理顺序对锚点（a标记）很重要。在正在使用的CSS（您的第三个代码段）中，visited链接的CSS代码显示在active链接的代码之前。

在第二个代码段中您自己的代码中，ul li之前hover的{{1}}的CSS为visited。你应该简单地颠倒这两个CSS规则的顺序。

我不确定为什么h3的CSS不起作用，除非它想要link的CSS规则。

Answer 3

这可能是你想要的。

<html>
 <head>
  <style rel="stylesheet" type="text/css">
   .archive  ul li a:hover{
   text-decoration:none;
   outline:medium none;
  }
 .archive   ul li  a:visited {
 color:#4280B4;
 text-decoration:underline;
}

 .archive h3 a:visited{
 color:#CE4F00;
 text-decoration:underline;
}


.archive   h3 a:hover{
color:#3C78A7;
text-decoration:none;
}
</style>
</head>
<body>
<div id="content">
<div class="archive">
  <div class="left-archive">
     <h3><a>Main Left tile</a></h3>
    <ul>
     <li><a class="link" href="#">Link title</a></li>
    </ul>
  </div>
  <div class="right-archive">
      <h3><a>Main Right tile</a></h3>
    <ul>
     <li><a class="link" href="#"> Link title</a></li>
    </ul>
  </div>
</div>
</div>  
</body>

您的href值可能会有所不同。唯一改变的是锚标签部分。

Answer 4

在你的css末尾加上这个

li a
{
    text-decoration:underline;
}

Answer 5

在某些浏览器中，除非您指定实际的href ='＃'

，否则<a>（锚）标记不会呈现为可移动的链接

无论如何，Chrome就是这种情况。如果我在你的示例html中指定了4 <a>的hrefs，那就可以了。

<div id="content">
   <div class="archive">
      <div class="left-archive">
         <h3><a href="#">Main Left tile</a></h3>
        <ul>
         <li><a href="#">Link title</a></li>
        </ul>
      </div>
      <div class="right-archive">
          <h3><a href="#">Main Right tile</a></h3>
        <ul>
         <li><a href="#"> Link title</a></li>
        </ul>
      </div>
   </div>
 </div>

Answer 6

你有锚点，没有链接。您还为所有链接添加了下划线，这与您所说的相反。我添加了一个“a”，这样你的风格也适用于他们。此外，锚标记没有'link'属性。

以下是一个实时示例：http://jsfiddle.net/khalifah/jymK3/

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            a, a:link, a:visited {
                color: #3c78a7;
                text-decoration: underline
            }

            a:hover, a:active {
                color: #3c78a7;
                text-decoration: underline
            }

            .archive ul li a:hover{
                text-decoration: none;
                outline: medium none
            }
            .archive ul li a:visited {
                color: #4280B4;
                text-decoration: underline
            }

            .archive h3 a:visited{
                color: #CE4F00;
                text-decoration: underline
            }

            .archive h3 a:hover{
                color: #3C78A7;
                text-decoration: none
            }
        </style>
    </head>
    <body>
        <div id="content">
            <div class="archive">
                <div class="left-archive">
                    <h3><a>Main Left tile</a></h3>
                    <ul>
                        <li><a>Link title</a></li>
                    </ul>
                </div>
                <div class="right-archive">
                    <h3><a>Main Right tile</a></h3>
                    <ul>
                        <li><a> Link title</a></li>
                    </ul>
                </div>
            </div>
        </div>  
    </body>
<html>

CSS的简单类调用问题

6 个答案: