CSS文件中是否有订单?为什么要加下划线(a href)

时间:2012-10-31 12:10:20

标签: css css3

我有这个CSS代码:

    .mini-profile {
        padding: 12px;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mini-profile a {
        color: #333333;
    }

    .mini-profile a:hover {
        color:#08C;
    }

    .metadata{
        color: #999;
        text-decoration:none;

    }

    .metadata:hover{
        color: #999;
        text-decoration:none;
    }

    .metadata a{
        color: #999;
        text-decoration:none;
    }

    .metadata a:hover {
        color: #333333;
        text-decoration:none;
    }

现在我有了这个:

    <div class="bs-docs-sidebar bs-docs-sidenav rounded-div-white mini-profile">
        <a href="www.google.com">
        <div class="content">
            <div style="margin-left:50px;"><b style="display:block;">Antoine</b>
                <small class="metadata">View my profile page</small>
            </div>
        </div>
        </a>
    </div>​

http://jsfiddle.net/PspXV/

现在,为什么“视图配置文件”在被徘徊时被加下划线?为什么?!他们在文件中的订单是我必须遵循的吗?

4 个答案:

答案 0 :(得分:2)

.mini-profile a:hover {
    color:#08C;
    text-decoration:underline; 
  • 这就是为什么

你的div类是class="bs-docs-sidebar bs-docs-sidenav rounded-div-white mini-profile"

具体mini-profile

答案 1 :(得分:2)

您在小提琴中定义了此规则,但未在您为问题提供的CSS中定义:

.mini-profile a:hover {
    ...
    text-decoration: underline;
}

text-decoration: underline;更改为text-decoration: none;以删除下划线。

答案 2 :(得分:0)

您的元数据不在标记内,但您正在将鼠标悬停在标记上。

   <small class="metadata"><a href="#">View my profile page</a></small>

http://jsfiddle.net/calder12/PspXV/4/

答案 3 :(得分:0)

            <a href="www.google.com">
                <div class="content">
                    <div style="margin-left:50px;"><b style="display:block;">Antoine</b>
                    <small class="metadata">View my profile page</small></div>
                </div>
            </a>

这严重违反了网络标准。这会将浏览器发送到怪异模式,并可能导致渲染问题。永远不要将块级元素放在内联元素中('a'中的'div')。