css - CSS文件中有顺序吗？为什么加下划线（a href）

Question

我有这个 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/

现在，为什么“查看配置文件”在悬停时带有下划线？为什么？！他们是我必须遵循的文件中的命令吗？

Answer 1

.mini-profile a:hover {
    color:#08C;
    text-decoration:underline; 

• 这就是为什么

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

具体来说mini-profile

Answer 2

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

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

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

Answer 3

您的元数据不在 a 标签内，但您正在调用 a 标签上的悬停。

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

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

Answer 4

            <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”）。