IDでスタイル指定されているときにDIVがCSSクラスからスタイルを取得しない

Question

classとidを同じdivに使用しているため、以下のコードが機能しない可能性があります。私は彼らが働くことになっていることを知っています。

参考：Can I use DIV class and ID together in CSS?

.PB { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background-color: #000; 
 
    width: 201px; 
 
    height: 422px; 
 
    z-index: 1; 
 
} 
 
#pb1-1 { 
 
    position: absolute; 
 
    margin: 0px; 
 
    background-color: green; 
 
    width: 65px; 
 
    height: 98.5px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    z-index: 2; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    -webkit-text-stroke: 1px white; 
 
} 
 
#pb1-2 { 
 
    position: absolute; 
 
    margin: 0px; 
 
    background-color: yellow; 
 
    width: 65px; 
 
    height: 98.5px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 68px; 
 
    z-index: 2; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    -webkit-text-stroke: 1px white; 
 
} 
 
#pb1-3 { 
 
    position: absolute; 
 
    margin: 0px; 
 
    background-color: red; 
 
    width: 65px; 
 
    height: 98.5px; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 136px; 
 
    z-index: 2; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    -webkit-text-stroke: 1px white; 
 
} 
 
.pu:hover { 
 
    font-size: 24px; 
 
    background-color: #999999; 
 
}

<div class="PB"> 
 
    <div id="pb1-1" class="pu">1&nbsp;</div> 
 
    <div id="pb1-2" class="pu">2&nbsp;</div> 
 
    <div id="pb1-3" class="pu">3&nbsp;</div> 
 
</div>

誰かが私が間違っているのを教えすることはできますか？

Answer 1

id年代は常にクラスよりも優先されているのであなたは、!importantを使用して:hover CSSルールを上書きする必要があります。同様に：

.PB { 
 
    position:relative; 
 
    margin:0 auto; 
 
    background-color:#000; 
 
    width:201px; 
 
    height:422px; 
 
    z-index: 1; \t 
 
} 
 

 
#pb1-1 {position:absolute; margin:0px; background-color:green; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:0px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;} 
 

 
#pb1-2 {position:absolute; margin:0px; background-color:yellow; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:68px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;} 
 
#pb1-3 {position:absolute; margin:0px; background-color:red; width:65px; height:98.5px; top:0px; right:0px; bottom:0px; left:136px; z-index:2; text-align:right; font-size:14px; -webkit-text-stroke: 1px white;} 
 

 
.pu:hover { 
 
    font-size:24px!important; 
 
    background-color:#999999!important; 
 
}

<div class="PB"> 
 
    <div id="pb1-1" class="pu">1&nbsp;</div> 
 
    <div id="pb1-2" class="pu">2&nbsp;</div> 
 
    <div id="pb1-3" class="pu">3&nbsp;</div> 
 
</div>

・ホープ、このことができます：

.pu:hover { 
    font-size:24px !important; 
    background-color:#999999 !important; 
} 

は、以下の更新スニペットを見てください！

Answer 2

<style type="text/css">属性を追加します。それはあなたの問題だ。それが動作します。

Answer 3

IDのスタイルがクラススタイルを上書きしている（ホバー効果を含む）ためです。順序をカスケードについて

詳しい情報はここで見つけることができます：あなたの例ではhttps://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

、私は!importantの使用を避ける、およびスタイルを定義するだけのクラスを使用します。

.PB { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background-color: #000; 
 
    width: 201px; 
 
    height: 422px; 
 
    z-index: 1; \t 
 
} 
 

 
.pu { 
 
    position: absolute; 
 
    margin: 0; 
 
    width: 65px; 
 
    height: 98.5px; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 2; 
 
    text-align: right; 
 
    font-size: 14px; 
 
    -webkit-text-stroke: 1px white; 
 
} 
 

 
.pb1-1 { background-color: green; left: 0; } 
 
.pb1-2 { background-color: yellow; left: 68px; } 
 
.pb1-3 { background-color: red; left: 136px; } 
 

 
.pu:hover { 
 
    font-size: 24px; 
 
    background-color: #999999; 
 
}

<div class="PB"> 
 
    <div class="pu pb1-1">1&nbsp;</div> 
 
    <div class="pu pb1-2">2&nbsp;</div> 
 
    <div class="pu pb1-3">3&nbsp;</div> 
 
</div>

Answer 4

疑似クラスでこれを試すことができます

.PB { 
    position: relative; 
    margin: 0 auto; 
    background-color: #000; 
    width: 201px; 
    height: 422px; 
    z-index: 1; 
} 

.pu { 
    position: absolute; 
    margin: 0; 
    width: 65px; 
    height: 98.5px; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 2; 
    text-align: right; 
    font-size: 14px; 
    -webkit-text-stroke: 1px white; 
} 

.pu:nth-child(1) { background-color: green; left: 0; } 
.pu:nth-child(2) { background-color: yellow; left: 68px; } 
.pu:nth-child(3) { background-color: red; left: 136px; } 

.pu:hover { 
    font-size: 24px; 
    background-color: #999999; 
} 

<div class="PB"> 
    <div class="pu">1&nbsp;</div> 
    <div class="pu">2&nbsp;</div> 
    <div class="pu">3&nbsp;</div> 
</div> 

をクリックしてください。here！