1

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

和代码： HTML：

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

​</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;
}​
4

2 回答 2

6

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

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

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

改为使用#control #show。

于 2012-10-22T11:48:22.237 回答
1

您可以使用 !important，但这可能会导致将来出现问题。问题本身是由特异性问题引起的。如果你更换

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

和

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

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

于 2012-10-22T11:49:04.863 回答