關於CSS 僞類及僞元素

CSS 屬性：

font: bold 20px/30px Arial;
意思代表的是：font-weight: bold; font-size: 20px; line-height: 30px; font-family: Arail;

僞類和僞元素

僞類用:表示，有foucs , hover , active等
僞元素用::表示 ， 有before , after
之所以有單冒號和雙冒號表示，是爲了區分僞類和僞元素，還有就是爲了兼容IE

這裏實現一種僞元素的效果

如果我要實現文字兩邊線條的效果 ， 怎麼實現最好????

.banner_title::before, .banner_title::after {
   content: '';
   width: 15px;
   height: 1px;
   background: #1e88e5;
   display: inline-block;
   vertical-align: middle;
}

 .banner_title::before {
    margin-right: 10px;
  }
 .banner_title::after {
    margin-left: 10px;
  }

首先爲僞元素設置共同的橫線樣式部分，然後在單獨對其進行左右邊距的調整。
display: inline-block;是爲了保持兩條線和文字保持在同一行上，
vertical-align: middle;是爲了和橫線保持垂直居中，至此，效果已實現~

結構僞類選擇器

:nth-child父元素的子元素，但必須滿足兩個條件纔可以。其一是子元素，其二是此子元素剛好處在那個位置。意思就是：下面的子元素必須是相同的標籤纔可以。不可以包含別的標籤。
:nth-of-type選擇的是某父元素的子元素，而且這個父元素是指定的類型。意思就是：不是一樣的標籤樣式依然可以選中元素的內容。
下面舉個例子說明一下：

div class="post"
    h1 我是標題
    p 我是文章中的第一個段落
    p 我是文章中的第二個段落

.post>p:nth-child(2){ color: red; }/第一個段落變成了紅色，但不是我們想要的效果/

.post>p:nth-of-type(2){ color: red; } /第一個段落變成了紅色，c是我們想要的效果/

雖然:nth-child很常見，但很脆弱，隨時會被其他的子元素擠出選擇的範圍。

而:nth-of-type雖然不常見，但在選擇某種類型的子元素的時候，更穩定，更可靠。