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

zhigoo 發(fā)布于2019-08-30 14:15 / 2295人閱讀

摘要：一居中效果行內(nèi)垂直居中行內(nèi)水平居中內(nèi)塊級元素水平居中內(nèi)塊級元素垂直居中二鼠標(biāo)懸浮背景顏色從上往下變化三選擇器的分類與使用核心選擇器標(biāo)簽類并且或者層次后代子代下一個兄弟之后所有兄弟屬性選擇器過濾器配合基本選擇器進(jìn)行篩選選擇具有

一 css居中效果
（1）div行內(nèi)垂直居中

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

(2)div行內(nèi)水平居中

   div li{
       text-align:center;
       }

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

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

（4）div內(nèi)塊級元素垂直居中

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

二、li鼠標(biāo)懸浮背景顏色從上往下變化

ul li a{
    text-decoration: none;
    color:#ffffdffffd;
    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;
    
}

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

    標(biāo)簽
    類
    id
    并且     p.one#first
    或者        p,.one,#first

(2) 層次

    后代    parent sons
    子代    parent>sons
    下一個兄弟        .one+*
    之后所有兄弟     .one~*

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

    配合基本選擇器進(jìn)行篩選
    
    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結(jié)尾的元su
    input[name~=username]選擇具有name屬性的、并且name的值之一為username的元素

(4) 偽類選擇器

    配合基本選擇器進(jìn)行篩選
    1) 子元素
        :first-child
        :last-child
        :nth-child()
        :first-of-type
        :last-of-type
        :nth-of-type()
    2) 狀態(tài)
        :hover
        :active
        :focus
(5) 偽元素選擇器
    ::after
        常用于清除浮動，讓浮動的子元素將父撐起來。