前端全栈学习第十一天-CSS3

ゞ浴缸里的玫瑰 2021-09-18 00:42 305阅读 0赞

1：属性选择器

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    属性选择器：属性是相对于标签而言的。所谓属性选择器就是根据指定名称的属性的值来查找元素
    1：E[attr]:查找拥有attr属性的E标签
    2：E[attr=value]:查找拥有指定的attr属性并且值为value的E标签，等于为严格匹配
    3：E[attr*=value]:查找拥有指定的attr属性并且值包含(可以在任何位置，有就行)value的E标签
    4：E[attr^=value]:开始
    5：E[attr$=value]:结束
    </body>
    </html>

2：兄弟伪类

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .first{
                color: red;
            }
            .first + li{
                color: blue;
            }
            .first ~ li{
                color: yellow;
            }
    
        </style>
    </head>
    <body>
    
    
    
    <li class="first">大数据</li>
    <span>看看能不能</span>
    <li>JavaScript</li>
    <li>人工智能</li>
    <li>php</li>
    </body>
    </html>

3：相对于父元素的结构伪类

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            li:first-of-type
        </style>
    </head>
    <body>
    相对于父元素的结构伪类
    E:first-child:查找E元素的父级中的第一个E元素
    1：相对于当前指定元素的父级
    2：查找的类型必须是指定的类型
    这样的查找属于半盲查找，你只是可以找到E的第一个元素，
    但是不会筛选是不是li，如果是就生效，如果不是就不生效。
    这样当你后续添加了其他的标签，他就失效了
    E:first-of-type{}
    查找的时候只会查找满足条件的类型的元素，过滤掉其他类型的元素
    E:nth-child
    指定索引位置(从1开始的索引||关键字||表达式) even偶数，odd奇数(1234679。。。)
    E:nth-of-type{}
    指定类型，并且筛选
    E:nth-of-type(n) 从1开始的索引
    E:nth-of-type(even)关键字
    E:nth-of-type(odd)关键字
    E:nth-of-type(-n+5)表达式n从0开始，(从头开始) E:nth-last-of-type(-n+5)表达式n从0开始，(从尾开始)
    2n 2n+1 ，
    0>>5
    1>>4
    2>>3
    3>>2
    4>>1
    5>>0
    当n<=0,取值无效
    E:empty
    没有任何内容，连空格都没有
    E:target
    
    
    </body>
    </html>

4：伪元素选择器

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                margin: 200px;
            }
    
            div:nth-of-type(1) {
                width: 300px;
                height: 200px;
                background: red;
                float: left;
    
            }
    
            div:nth-of-type(2) {
                width: 200px;
                height: 200px;
                background: blue;
                float: left;
                position: relative;
            }
    
            div:nth-of-type(2)::before {
                content: "";
                /*content必须写，否则后期不可见*/
                /*默认情况下是行内元素，需要转化为块级元素，才能设置宽高，disply：block；float，position*/
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background: #ffffff;
                position: absolute;
                top: -10px;
                left: -10px;
            }
    
            div:nth-of-type(2)::after {
                content: "";
                /*content必须写，否则后期不可见*/
                /*默认情况下是行及元素，需要转化为块级元素，才能设置宽高，disply：block；float，position*/
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background: #ffffff;
                position: absolute;
                bottom: -10px;
                left: -10px;
            }
        </style>
    </head>
    <body>
    
    
    
    <div></div>
    <div></div>
    </body>
    </html>

5：安卓机器人

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .content {
                width: 500px;
                height: 500px;
                margin: 0 auto;
                border: 1px solid #000;
            }
    
            .an_header {
                width: 250px;
                height: 125px;
                background-color: green;
                margin: 0 auto;
                border-radius: 125px 125px 0 0;
                position: relative;
                margin-bottom: 10px;
                position: relative;
            }
    
            .an_header::before, .an_header::after {
                content: "";
                width: 20px;
                height: 20px;
                background-color: #fff;
                position: absolute;
                border-radius: 10px;
            }
    
            .an_header::before {
                top: 70px;
                left: 60px;
            }
    
            .an_header::after {
                bottom: 36px;
                right: 62px;
            }
    
            .an_body {
                width: 250px;
                height: 250px;
                background-color: green;
                border-radius: 0px 0px 20px 20px;
                margin: 0 auto;
                position: relative;
            }
    
            .an_body::before, .an_body::after {
                content: "";
                width: 32px;
                height: 180px;
                background-color: green;
                position: absolute;
                border-radius: 15px;
    
            }
    
            .an_body::before {
                top: 30px;
                left: -47px;
            }
    
            .an_body::after {
                top: 30px;
                right: -47px;
            }
    
            .an_footer {
                width: 250px;
                height: 110px;
                background-color: #fff;
                margin: auto;
                position: relative;
            }
    
            .an_footer::after, .an_footer::before {
                content: "";
                position: absolute;
    
                width: 30px;
                height: 90px;
                background-color: green;
                border-radius: 5px;
            }
    
            .an_footer::after {
                left: 30px;
            }
    
            .an_footer::before {
                right: 30px;
            }
    
    
        </style>
    </head>
    <body>
    <div class="content">
        <div class="an_header"></div>
        <div class="an_body"></div>
        <div class="an_footer"></div>
    </div>
    </body>
    </html>