CSS不会覆盖其他语句

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选择器和一个类型选择器”组成

后者更为具体 ，因此赢得了级联。

请改用#control #show 。

Answer 2

您可以使用！important，但是将来可能会引起问题。 问题本身是由特异性问题引起的。 如果您更换

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

与

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

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