css的居中效果、li鼠標懸浮背景顏色從上往下變化、選擇器的分類與使用

一 css居中效果
（1）div行內垂直居中

div li{
        height:30px;
        line-height:30px; 
       }

(2)div行內水平居中

div li{
       text-align:center;
       }

(3) div內塊級元素水平居中

div p{
        margin：0 auto；
        width:50%;
        }

（4）div內塊級元素垂直居中

div p{
   height:300px;
   line-height:300px;
   }

2、li鼠標懸浮背景顏色從上往下變化

ul li a{
    text-decoration: none;
    color:#dddddd;
    display: block;
    background:linear-gradient(white 50%, #373735 50%);
    background-size: 100% 200%;
    background-position: 0 100%;
    
}
 ul li a:hover{
   background-position: 0 0%;
    color:#000;
    transition: background .3s ease;
    
}

3、選擇器的分類與使用
（1） 核心選擇器

標籤
    類
    id
    而且     p.one#first
    或者        p,.one,#first

(2) 層次

後代    parent sons
    子代    parent>sons
    下一個兄弟        .one+*
    以後全部兄弟     .one~*

(3) 屬性選擇器(過濾器)

配合基本選擇器進行篩選
    <input type="text" name="username">
    selector[name]
    input[name=username] 選擇具備name屬性的、而且name的值爲val元素
    input[name*=use]選擇具備name屬性的、而且name的值包含user的元素    
    input[name^=u]選擇具備name屬性的、而且name的值以val開頭的元素
    innput[name$=e]選擇具備name屬性的、而且name的值以e結尾的元su
    input[name~=username]選擇具備name屬性的、而且name的值之一爲username的元素

(4) 僞類選擇器

配合基本選擇器進行篩選
    1) 子元素
        :first-child
        :last-child
        :nth-child()
        :first-of-type
        :last-of-type
        :nth-of-type()
    2) 狀態
        :hover
        :active
        :focus
(5) 僞元素選擇器
    ::after
        經常使用於清除浮動，讓浮動的子元素將父撐起來。