Web前端CSS伪类选择器

最新推荐文章于 2024-04-25 20:37:26 发布

qq_33270521

最新推荐文章于 2024-04-25 20:37:26 发布

阅读量425

点赞数

文章标签： CSS3

本文链接：https://blog.csdn.net/qq_33270521/article/details/83353009

版权

1，

li:first-child第一个元素
li:last-child最后一个元素
li:nth-child(n)第n个元素
li:nth-last-child(4)倒数第n个元素
    /*
    在这里可以以a*n+b输入，比如5n+2
    个人感觉是遍历，比如有10个元素，则
    n=0---2
    n=1---7
    n=2---12
    2和7则被选中，负数也一样
    */
li:nth-child(odd)奇数
h2:nth-child(odd)偶数
/*
    以上的不分元素种类，比如<h1>和<p>不分的
    这里的li标签不是选择其子类，而是li和其同一层的元素
*/
h2:nth-of-type(odd)只选中h2这一种
h2:only-child只有一个同级元素

2，伪类

input[type="text"]:hover经过
input[type="text"]:focus点击
input[type="text"]:active点击不放
input[type="checkbox"]:checked对于选择按钮的操作，作用在按钮上。
input[type="text"]:disabled在不可用时显示某种颜色之类的。
input[type="text"]:enable

3，兄弟元素选择器

<html>
<body>
    <style>
        div ~p{        /*选中的是，div中的div相邻的元素*/
            background-color: gold;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>div子元素</p>
            <p>div子元素</p>
            <p>div子元素</p>
            <p>div子元素</p>
        </div>
        <p>div子元素</p>
        <p>div子元素</p>
        <p>div子元素</p>
    </div>
</body>
</html>

5，添加服务器字体

        @font-face{
            font-family: WebFont;    /*调用时用到的名字*/
            /*ttf truetype otf opentype*/
            src: url("HoloMDL2.tff")format("truetype");设置地址以及类型
        /*
            src: local("Arial"),url("HoloMDL2.tff")表示先在客户端找，其次服务器
        */
            font-weight: normal;一些字体的其他设置
        }

6，font-size-adjust:0.60;

        #div{
            font-size-adjust:0.60;
            font-family: Cambria，Arial；
        }

        /*
        aspect= 一个字体实际显示的大小 / font-size
        比如我们选择两种字体，aspect为a,b   font-size=100;
        那么第一种字体大小为100*a，如果不设置font-size-adjust时后一种显示100*b
        设置font-size-adjust:a
            
首选字体的字体尺寸 * （font-size-adjust 值 / 可用字体的 aspect 值）=可应用到可用字体的字体尺寸
        可应用到可用字体的字体尺寸=100*(a/b)
        这个尺寸不是实际显示的尺寸，而是相当于font-size等于这个尺寸
        那么实际显示为100*(a/b) *b
        那么字体大小保持不变
        */

7，显示类型

    div{
            background-color: aqua;/*占一行*/
            display: inline;
            /*
            设置后不再换行  
            inline-block显示相同  
            inline无法设置高度宽度 
            而inline-block可以*/
            width: 300px;
        }
   table{
            border:solid 3px black;
            display: inline-table;
            /*
            display: inline;
            表格显示为一行，如果表格有多行则产生溢出*/
            inline-table
            显示正常
            */
        }
  div{
            display: list-item;
            /*将一串div以List形式表现*/
            list-style-type: circle;
            margin-left: 130px;
        }

8，overflow

    div{
            overflow: hidden;
            /*hidden超出隐藏  
            scroll滚轮出现 
            auto水平垂直自动出现 
            visiable与不加相同溢出*/
            white-space: nowrap;/*不进行换行*/
            width:300px;
            height: 300px;
        }

9，盒模型

         div{
            width: 200px;
            height: 300px;
            padding: 50px;
            background-color: red;
        }      
    /*这里设置的宽度*/
        .div2{
            box-sizing: border-box;
        /*宽度对应content+border+padding*/
        }
        .div3{
            box-sizing: content-box;
        /*width只是指content，所以实际更大*/

        }

10，background的一些新操作

        .div{
            background-origin: border-box;
            /*
            背景图片开始地址，与下面相同
            */
            background-clip: border-box;
            /*
            在显示背景时，比如颜色时的范围
            border-box包含边框、内边距
            padding-box不含边框
            content-box不含内边距*/

        }

qq_33270521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端CSS伪类选择器

1，li:first-child第一个元素li:last-child最后一个元素li:nth-child(n)第n个元素li:nth-last-child(4)倒数第n个元素 /* 在这里可以以a*n+b输入，比如5n+2 个人感觉是遍历，比如有10个元素，则 n=0---2 n=1---7 n=2---12 2和7则被选中，负数...
复制链接

扫一扫