は、CSSの属性と擬似クラス

Question

nav.page-nav { 
 
    background-color: #1d1d1d; 
 
    line-height: 6rem; 
 
    font-size: 1.7rem; 
 
} 
 
nav.page-nav .container { 
 
    display: -ms-flexbox; 
 
} 
 
nav.page-nav a { 
 
    display: block; 
 
    width: 9rem; 
 
    padding: 0 1.8rem; 
 
    border-right: 1px dotted #3d3d3d; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    color: #c3c3c3; 
 
    text-shadow: 0 1px 0 #000; 
 
} 
 
nav.page-nav a:first-child { 
 
    border-left-width: 1px; 
 
    border-left-color: #3d3d3d; 
 
} 
 
nav.page-nav a:hover { 
 
    color: #e4e4e4; 
 
    background-color: black; 
 
} 
 
nav.page-nav .active { 
 
    color: white; 
 
    background: -ms-linear-gradient(#c95656, #8d0606); 
 
    background: linear-gradient(#c95656, #8d0606); 
 
} 
 
nav.page-nav .active:hover { 
 
    color: #fff; 
 
} 
 
nav.page-nav .active:before { 
 
    position: absolute; 
 
    top: 6rem; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    margin-left: -1.9rem; 
 
    border-top: 2rem solid #8d0606; 
 
    border-right: 6.5rem solid transparent; 
 
    content: ""; 
 
} 
 
nav.page-nav .active:after { 
 
    position: absolute; 
 
    display: block; 
 
    height: 0; 
 
    width: 0; 
 
    margin-left: 4.3rem; 
 
    border-top: 2rem solid #8d0606; 
 
    border-left: 6.5rem solid transparent; 
 
    content: ""; 
 
}

<nav class="page-nav"> 
 
    <div class="container"> 
 
    <a href="/index.htm" class="active">Home</a> 
 
    <a href="/about.htm">About</a> 
 
    <a href="/schedule.htm">Schedule</a> 
 
    <a href="/register.htm">Register</a> 
 
    </div> 
 
</nav>

た後、私はnav.page-navでdisplay: blockセレクタで混乱しています、前に、表示のための説明が必要。私がそれを表示するように変更すると、インラインブロックは何も変わりません。どうして？

私はまた：beforeと：afterと混同しています。上記のコードではどのように動作しますか？私は要素の前になるはずです。それらはそれぞれのアクティブな要素の下に表示されています。

Answer 1

display:block and inline-blockの最も一般的な違いは整列です。

Display:Blockデフォルトではフルwidthが割り当てられ、要素にはheightが割り当てられます。 display:block要素の配置は、1つの行、すなわち水平方向に整列させるために、float:leftを使用する必要がありますが、display:inline-block要素はデフォルトでinlineに整列されます。float:leftを使用する必要はありません。

Pseudo ::before - ターゲット要素の前にいくつかのコンテンツまたは一部のスタイルプロパティを割り当てるために使用されていますがので、あなたの前に要素がターゲット要素の一番下にあるtop:6remnav.page-nav .active:beforeに割り当てられているよう。 Pseudo ::after - ターゲット要素の後にいくつかのコンテンツまたはスタイルプロパティを割り当てるために使用されます。 `の6rem`：

nav.page-nav { 
 
    background-color: #1d1d1d; 
 
    line-height: 6rem; 
 
    font-size: 1.7rem; 
 
} 
 

 
/* TODO: nav.page-nav .container */ 
 
    nav.page-nav .container { 
 
     display: -ms-flexbox; 
 
    } 
 

 
/* TODO: nav.page-nav a */ 
 
    nav.page-nav a { 
 
     display: block; 
 
     width: 9rem; 
 
     padding: 0 1.8rem; 
 
     border-right: 1px dotted #3d3d3d; 
 
     text-decoration: none; 
 
     text-transform: uppercase; 
 
     text-align: center; 
 
     color: #c3c3c3; 
 
     text-shadow: 0 1px 0 #000; 
 
      position:relative; 
 
    } 
 

 
/* TODO: nav.page-nav a:first-child */ 
 
     nav.page-nav a:first-child { 
 
      border-left-width: 1px; 
 
      border-left-color: #3d3d3d; 
 
     } 
 

 
/* TODO: nav.page-nav a:hover */ 
 
     nav.page-nav a:hover { 
 
      color: #e4e4e4; 
 
      background-color: black; 
 
     } 
 

 
/* TODO: nav.page-nav .active */ 
 
    nav.page-nav .active { 
 
     color: white; 
 
     background: -ms-linear-gradient(#c95656, #8d0606); 
 
     background: linear-gradient(#c95656, #8d0606); 
 
    } 
 

 

 
/* TODO: nav.page-nav .active:hover */ 
 
     nav.page-nav .active:hover { 
 
      color: #fff; 
 
     } 
 

 
/* TODO: nav.page-nav .active:before */ 
 
     nav.page-nav .active:before { 
 
      position: absolute; 
 
      top:6rem; 
 
      left:0; 
 
      display: block; 
 
      height: 0; 
 
      width: 0; 
 
      border-top: 2rem solid #8d0606; 
 
      border-right: 6.5rem solid transparent; 
 
      content: ""; 
 
     } 
 

 
/* TODO: nav.page-nav .active:after */ 
 
     nav.page-nav .active:after { 
 
      position: absolute; 
 
      display: block; 
 
      height: 0; 
 
      width: 0; 
 
      border-top: 2rem solid #8d0606; 
 
      border-left: 6.5rem solid transparent; 
 
      content: ""; 
 
      bottom:-2rem; 
 
      right:0; 
 
     }

<nav class="page-nav"> 
 
<div class="container"> 
 
<a href="/index.htm" class="active">Home</a> 
 
<a href="/about.htm">About</a> 
 
<a href="/schedule.htm">Schedule</a> 
 
<a href="/register.htm">Register</a> 
 
</div> 
 
</nav>