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 に答える