H5C3-day02

1.CSS新增加的选择器

1.1 兄弟选择器和匹配选择器

<!-- 
        <style>
            .span2+div {
                color: #2e8fff;
            }
        </style>
        位于同一父元素下的相邻元素
     -->
    <div>
        <span>1</span>
        <span class="span2">2</span>
        <div>兄弟选择器</div>
        <span>3</span>
        <span>4</span>
        <div>兄弟选择器</div>
        <span>5</span>
    </div>

    <!-- 
        <style>
            div~.span {
                color: red;
            }
        </style>
        匹配选择器
        位于谁后面的符合条件的元素
     -->
    <div>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <div>
            匹配选择器
        </div>
        <span>5</span>
        <span class="span">'red1'</span>
    </div>
    <span class="span">'red2'</span>

1.2属性选择器

        /* 
            属性选择器
        */
        /* [attribute] 
            匹配所有指定属性
        */
        /* [title] {
            color: red;
        } */
        /* [attribute='value'] 
            匹配属性并且指定值符合的元素
        */
        /* [title='3'] {
            color: red;
        } */
        /* [attribute^='value'] 
            属性值以value值开始的元素
        */
        /* [class^='box'] {
            color: blue;
        } */

        /* [attribute$='value'] 
            属性值以value值结尾的元素
        */
        /* [class$='2'] {
            color: red;
        } */
        /* [attribute*='value'] 
            匹配包含指定值的元素
        */
        /* [class*='3'] {
            color: red;
        } */

        /* [attribute~='value']
            匹配包含指定词汇的元素        
        */
        /* [class~='box'] {
            color: red;
        }

        [class~='box2'] {
            color: blue;
        } */

        /* [attribute|='value'] 
            匹配以指定词汇开头并且（&&）还可以连字符为分隔符
        */
        /* [class|='box'] {
            color: red;
        } */

1.3伪类选择器

    <style>
        /* :first-child 
            整体结构匹配
            看的是是否为.box的第一个子元素
        */
        .box1 p:first-child {
            color: red;
        }

        .box1 p:last-child {
            color: red;
        }

        /* 标签结构匹配
           以标签为基准 是否为.box2下所有p标签的第一个
        */
        .box2 p:first-of-type {
            color: blue;
        }

        .box2 p:last-of-type {
            color: blue;
        }


        /* 
            nth-child整体型结构 从前往后
            奇数：2n+1 odd
            偶数：2n even
            nth-last-child整体型结构 从后往前
            奇数：2n+1 odd
            偶数：2n even
        */
        .box1 p:nth-child(odd) {
            color: red;
        }

        .box1 p:nth-child(even) {
            color: blue;
        }

        .box2 p:nth-last-child(odd) {
            color: red;
        }

        .box2 p:nth-last-child(even) {
            color: blue;
        }

        /* 
            标签类型结构
            nth-of-type()
            nth-of-last-type()
        */
    </style>  


    <div class="box1">
        <h1>hhhhhhhhhhhhhhhhhhhh</h1>
        <p>11111111111111111</p>
        <p>22222222222222222</p>
        <p>33333333333333333</p>
        <p>44444444444444444</p>
    </div>
    <div class="box2">
        <h1>hhhhhhhhhhhhhhhh</h1>
        <p>11111111111111111</p>
        <p>22222222222222222</p>
        <p>33333333333333333</p>
        <p>44444444444444444</p>
    </div>

1.4其他伪类选择器

        /* 
            :root 根元素添加样式
            :empty 空内容元素添加样式
            :not() 排除()里的元素  为其他元素添加样式
            :target 目标样式
        */
        /* :root {
            color: red;
        }

        :empty {
            display: block;
            width: 100px;
            height: 40px;
            background-color: #2e8fff;
        } */

        p:not(.two) {
            color: blue;
        }

        /*
            锚点定位
            跳转目标标签的样式改变
        */
        :target {
            color: orange;
        }

1.5表单伪类选择器

        /* 
            :disabled  禁止选中时的样式 
            :enabled   可用状态下的样式
            :checked   单选/复选被选中的样式
         */
        :disabled {
            background-color: red;
            border: 1px solid red;
        }

        :enabled {
            background-color: blue;
            border: 1px solid blueviolet;
        }

        :checked {
            width: 22px;
            height: 22px;
        }

1.6内容追加和内容选中

        /*
            字体选中时的样式
        */
         ::selection {
            background-color: orange;
            color: white;
         }
        /*
            元素后面追加内容
        */
         div::after {
            content: '';
            display: block;
            clear: both;
            width: 100px;
            height: 100px;
            background-color: red;
        }

        /*
            元素前面追加内容
        */
        div::before {
            content: '';
            display: block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }

2.背景渐变background-image

background-image:linear-gradient(to right/bottom/left/top,color1,color2);

2.1线型渐变linear-gradient

     .box {
            width: 200px;
            height: 80px;
            background-image: linear-gradient(to right, aqua, orange);
        }

2.2径向渐变radial-gradient

        .box1 {
            width: 200px;
            height: 150px;
            background-image: radial-gradient(circle, red, yellow);
        }

        .box2 {
            width: 200px;
            height: 150px;
            background-image: radial-gradient(white, black);
        }

3.滤镜filter

3.1模糊度blur

        div {
            width: 300px;
            height: 300px;
            position: absolute;
            filter: blur(100px);
        }

        .box1 {
            left: 100px;
            bottom: 100px;
            background-color: aqua;
        }

        .box2 {
            top: 100px;
            left: 40%;
            background-color: rgb(129, 69, 141);
        }

        .box3 {
            right: 100px;
            bottom: 100px;
            background-color: rgb(50, 117, 179);
        }

3.2灰度图grayscale

     div {
            width: 200px;
            height: 200px;
            /* 红色->黑色 */
            filter: grayscale(100%);
            background-image: url('/作业/img/15.png');
            background-size: contain;
        }