css - CSS中Display、Before、After属性和伪类需要说明

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 感到困惑。如果我将其更改为显示:内联 block 没有任何变化。为什么？

我也对 :before 和 :after 感到困惑。它们在上面的代码中是如何工作的？我的意思是 before 应该在元素之前没有吼叫它。它们显示在每个事件元素下方。

Answer 1

display:block 和 inline-block 之间最常见的区别是对齐方式。

Display:Block 默认情况下采用完整的 width 并将 height 分配给那里的元素。 display:block 元素的放置是一个接一个的，而要将它们排成一行，即水平对齐，我们需要使用 float:left，但是 display:inline- block 元素默认在 inline 中对齐，无需使用 float:left。

Pseudo::before - 用于在目标元素之前分配一些内容或一些样式属性，但正如您已将 top:6rem 分配给 nav .page-nav .active:before 因此您的 before 元素位于目标元素的底部。Pseudo::after - 用于在目标元素之后分配一些内容或一些样式属性。

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>