なぜこの擬似クラスセレクタが機能していないのですか？

Question

私が使うすべてのdivに、内側の境界線を描画するためのセレクタを使用しています。さて、 "：after"疑似クラスはうまくいきませんでしたか？なぜこのセレクターが機能しないのでしょうか？私がちょうど：hover擬似クラスの作品を使用している場合は、両方のクラスを使いたいということです！

このEX

感謝を見てください！

例六

  <p>Grade: A</p> 

      <p>thisis the thing</p> 

      <div class="w3c"> 
       <div id="tab16"> 
        <a href="#tab16">cars</a> 

          <div class="test"> 
            <div><img alt="" src="http://placehold.it/176x106/" /></div> 
          </div>      
       </div> <!-- ends tab16 --> 

       <div id="tab17"> 
        <a href="#tab17">othercars</a> 
        <div> 
         <div><img alt="" src="http://placehold.it/180x110/" /></div> 
         <div><img alt="" src="http://placehold.it/180x110/" /></div> 

        </div> 
       </div> <!-- ends # tabs17 --> 

      </div> <!-- ends .w3c --> 



</body> 

CSS ----あなたはコンテンツにそれを与えるとブロックとして、それを表示する必要が表示されるまで:after擬似要素について

@charset "utf-8"; 
/* CSS Document */ 

     .w3c { min-height: 250px; position: relative; width: 554px;} 



     .w3c > div { display: inline; } 
     .w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: #fff; background: #666666; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; } 
     .w3c > div:not(:target) > a { border-bottom: 0; background: #b0b0b0; /*-moz-linear-gradient(top, white, #eee); */} 
     .w3c > div:target > a { background: white; color: #b0b0b0; } 

     .w3c > div > div { background: white; z-index: 0; left: 0; top: 30px; bottom: 0; right: 0; padding: 10px; border: 1px solid #ccc; width: 596px; height: 133px;} 
     .w3c div div > div { border: 1px solid red; float: left; width: 180px; height:110px; margin-left: 10px; } 
     .w3c div div > div:hover:after{ border: 1px solid black; width:178px; height: 108px;} 

     /*.w3c > div > div > a > img:after{border: 2px solid black; width:178; height: 108px; }*/ 
     .w3c > div:not(:target) > div { position: absolute; } 
     .w3c > div:target > div { position: absolute; z-index: 1; } 

Answer 1

。

次に、絶対に:afterを配置し、比較的div自体を配置：

.w3c div div > div { 
    position: relative; 
    border: 1px solid red; 
    float: left; 
    width: 180px; 
    height: 110px; 
    margin-left: 10px; 
} 

.w3c div div > div:hover:after { 
    display: block; 
    content: ''; 
    position: absolute; 
    border: 1px solid black; 
    width: 178px; 
    height: 108px; 
} 

Answer 2

私は問題が何であるかを発見しました。

::afterは、既存の要素の後にコンテンツを追加するために使用され、後に続くスタイル要素には追加されません。

x要素またはx要素ごとにnth-child()を使用すると便利です。

.w3c div div > div:nth-child(2):hover { 
    border: 1px solid black; 
} 

http://css-tricks.com/how-nth-child-works/