css3

最新推荐文章于 2024-09-28 16:16:42 发布

weixin_33938733

最新推荐文章于 2024-09-28 16:16:42 发布

阅读量50

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qingkun/p/9841833.html

本文详细介绍了CSS3中的一些关键属性，如border-radius、display、background-position等，并展示了如何使用选择器进行精确样式控制，包括nth-of-type、first-child、last-child等。此外，还探讨了伪类如:hover、:focus的用法，以及如何利用:before和:after伪元素添加内容。

自己总结的一些css3的属性，仅供参考，同时也希望多交流交流。

　　　　　　　.box{
                
                border-radius: 10px;
                display: flex;
                background-position: 11px 100px;
            }
            input[value*="abc"]{}/*匹配所有项*/
            input[value^="abc"]{}/*匹配开头项*/
            input[value$="abc"]{}/*匹配结尾项*/
            /*从1开始    也可以写一个n  n是一个从0开始++的一个数    也可以写odd和even*/
            li:nth-of-type(1){}
            li:first-child{}
            li:last-child{}
            /*代表的是html标签*/
            /*:root优先级最高 */
            :root(){background: red;}
            li:not(.box){}
            li:empty{}
            /*:target代表的就是锚点元素*/
            :target h3{background: red;}
            /*获取焦点时*/
            input:focus{}
            /*获取复选框*/
            input[type="checkbox"]:checked+span{font-size: 35px;}
            /*鼠标拖动选中的状态*/
            ::selection{}
            /*第一个字符*/
            :first-letter{}
            /*第一行*/
            :first-line{}
            div:before{content: "\2192";}
            div:after{content: "!";}
            /*.box兄弟元素下面所有span*/
            .box~span{}
            /*.box兄弟元素下面唯一一个距离最近的span*/
            .box+span{}
            /*只找孩子不找孙子*/
            .box>span{}
            /*blur是模糊值    而且可以设置多个阴影*/
            .box{
                text-shadow: x y blur color;
                box-shadow: x y blur color;
            }
            
            /* 定义一种字体 给下载好的字体起名字 */
            @font-face {
                /* 给 src 指向的字体起一个名字 */
                font-family:"xixi";
                /* 字体的地址  本地地址 */
                src:url('fonts/1.ttf');
            } 
            p{
                font-family:"xixi";
            }