Question

我在我的网站底部制作了一个控制栏。现在我想在这个酒吧的外面顶部有一个小箭头。但我不能把它放在外面！以下是我的问题示例：http://jsfiddle.net/HHcwb/2/

代码： HTML：

<div id="control">
<p title="Show Bar" id="show">]</p>

CSS：

#control{
    position:absolute;
    bottom:0px;
    background:rgba(51, 51, 51, 0.7);
    width:30%;
    height: 75px;
    text-align:center;
    left:35%;
    border-top-left-radius:100px 50px;
    border-top-right-radius:100px 50px;
}
#control p{
    position:absolute;
    margin:0;
    cursor:pointer;
    font-family:'WebSymbolsRegular';
    color:#bbb;
    font-size:16px;
    top:1px;
    transition:color 0.3s ease;
    -webkit-transition:color 0.3s ease;
    -moz-transition:color 0.3s ease;
    -o-transition:color 0.3s ease;
}
#control p:hover{
    color:#E4DBBF;
}
#show{
    left:49%;
    top:-20px;
}

Answer 1

#show由“一个id选择器”组成。

#control p由“一个id选择器和一个类型选择器”

组成

后者更多specific，因此它赢得了级联。

改为使用#control #show。

Answer 2

你可以使用！important，但这可能在将来引起问题。问题本身是由特异性问题引起的。如果你替换

#show{
left:49%;
top:-20px ;
}

带

#control #show{
left:49%;
top:-20px ;
}

它也会起作用，这是因为你通过提供2个id作为选择器来提高特异性，这意味着浏览器将这些规则解析为更重要的

CSS不会覆盖其他语句

2 个答案: