1.css3属性选择器

text
1 2 3 4 5 6 7 8 9 10 
    <input type="text" name="firstname" value="Tom" class="first">

    <input type="text" name="middlename">

    <input type="text" name="lastname" value="Tomas">

    <input type="text" name="firstcity" value="西安" class="second">
    
你最好
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 

    1.有class属性的input标记
    input[class]{
        background-color: red;
    }


    2.input标签中class属性是first的元素
    input[class="first"]{
        background-color: #cd5c5c;
    }


    3.所有标签中class等于first的元素
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 
    [class='first']{
        background-color: yellow;
    }




    4.input的name属性以first开头*,^=是以什么开头
    input[name^=first]{
        background-color: #cd5c5c;
    }


    5.input的name属性以name结尾，$=表示以什么结尾
    input[name$=name]{
        background-color: #cd5c5c;

    }
text
1

2.css3伪类选择器

（这里就不把代码贴过来了）

①文档的根(html): :root

②某元素x的父元素的第一个子元素：x:first-child

③某元素x的父元素的最后一个子元素：x:last-child

④某元素x的父元素的第n个子元素： x:nth-child(n)

⑤某元素x的父元素的倒数第n个子元素： x:nth-last-child(n)

text
1 
 可以通过上面的对元素的css进行设置

3.伪类对象选择器

类名:before、类名:after before和after选择器必须和content一起使用，即使content为空，也要写出来

4.垂直居中

给需要垂直居中的父元素的display属性设为table，本身的display:table-cell(单元格)、vertical-aline-middle，此时内容居中显示。

text
1 2 3 4 5 6 7 8 9 10 11 12 
<div id="content">
    <div id="word">
        锄禾日当午，

        汗滴禾下土。

        谁知盘中餐，

        粒粒皆辛苦。

    </div>
</div>
text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
#content{
    width: 300px;
    height: 300px;
    border: 1px solid red;
    margin: auto;
    display: table;
}

#word{
    border: 1px solid blue;
    text-align: center;
    display: table-cell;
    vertical-align: middle; /*垂直居中*/
}

5.圆角矩形

border-radius：百分比/长度;

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 
<!DOCTYPE html>
<html>
<head>
    <title>圆角矩形</title>
</head>

<style type="text/css">

div{
    width: 200px;
    height: 200px;
    border: 1px solid #f00;
    text-align: center;
    vertical-align: middle;
    display: 
}

div:first-of-type{
    border-radius: 10px; /*四个角的的半径全是10px*/
}

div:nth-of-type(2){
    border-radius: 20px 40px;  /*上下——左右*/
}

div:nth-of-type(3){
    border-radius: 20px 40px 60px; /*上——左右——下*/
}

div:nth-of-type(4){
    border-radius: 20px 40px 50px 80px; /*上右下左*/
}

div:nth-of-type(5){
    border-radius: 200px;
}

</style>

<body>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

6.阴影的制作

阴影的制作很简单的 只需要一个属性就可以搞定 那当然是 box-shadow啦

box-shadow: 水平阴影 垂直阴影 羽化值 阴影大小 阴影颜色 外部阴影(outset)和内部阴影(inset);

7.iphone的制作

这个可以当做是对上面知识的一个巩固练习
吐舌头

这些内容是个人的理解，可能与标准的还有些出入，见谅啦。

原文地址：https://blog.csdn.net/cherish0222/article/details/51969053?ops_request_misc=&request_id=&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-29-51969053-null-null.142^v87^koosearch_v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88