Question

我为一般的超链接设计了一些CSS样式。我想为特定div中的超链接标题指定一些其他CSS。请查看以下HTML代码。我想仅在div类框中为h2标题指定不同的样式。

<a href="example.com" title="title">Normal Link </a>

<div class ="box">
<h2><a href="example.com" title="heading">Heading Should be red. </a></h2>
    <a href="example.com" title="links">Should be normal green</a>
</div>

这是CSS代码：

a:link, a:visited{
    text-decoration: underline;
    color: green;
}

a:hover{
    text-decoration: none;
    }

.box{
    border: 1px dashed pink;
    width:400px;
    height: 100px;
    margin:10px 0px;
}

.box h2{
    color: red;
    font-size:24px;
}

这里是jsfiddle演示： http://jsfiddle.net/HVX3d/1/

Answer 1

您是否尝试过定位链接？像这样：

.box h2 a
{
   color: red;
    font-size:24px;
}

Answer 2

看起来你想要在h2中设置标签样式，而不是h2本身。见这里：

http://jsfiddle.net/Paulpro/HVX3d/2/

由于您使用css为锚标记设置样式为绿色。将h2设置为红色不起作用，它等同于内联样式：

<h2 style="color: red;">
    <a style="color: green;">
       This will be green...
    </a>
</h2>

Answer 3

试试这个

.box h2 a {
  color: #fa2;
  font-style: italic;
}

Answer 4

简单，添加：

.box h2 a {
    color:red;
}

Answer 5

试试这个：

.box h2 a {
    color: red;
}

标题链接的CSS不同

5 个答案: