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;
   }

二、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;
    
}

三、选择器的分类与使用
（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
        常用于清除浮动，让浮动的子元素将父撑起来。

猜你喜欢