其他分享
首页 > 其他分享> > css3 层级选择器 和 i iconfont字体 背景图原点 裁切 大小

css3 层级选择器 和 i iconfont字体 背景图原点 裁切 大小

作者:互联网

<!-- 

        层级选择器
            父元素>子元素{}
                只能选择父元素的最近的一层的元素
            兄弟元素 + 兄弟元素{}
                通过当前的元素 选择符 离他最近 下面的兄弟元素
            兄弟元素 ~ 兄弟元素{}
                通过当前的元素 选择符 下面所有的兄弟元素
     -->
     <style>
        p:nth-of-type(3)~span{
            background-color: crimson;
        }
    </style>
    <p>ppppppppppppppp</p>
    <h2>h2h2h2h2h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2h2h2</h2>
    <p>ppppppppppppppp</p>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2h2h2</h2>
    <p>ppppppppppppppp33333</p>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2h2h2</h2>
    <p>ppppppppppppppp</p>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2h2h2</h2>
    <span>12313</span>
    <span>12313</span>
    <span>12313</span>
    <span>12313</span>
    <span>12313</span>
    <span>12313</span>
    <span>12313</span>
    <p>ppppppppppppppp</p>
    <p>ppppppppppppppp</p>
    <p>ppppppppppppppp</p>
    <p>ppppppppppppppp</p>
    <h2>h2h2h2h2h2</h2>
    <h2>h2h2h2h2h2h2h2</h2>
    <p>ppppppppppppppp</p>
		/* + 下面的最近的一个兄弟元素 */
        /*  ~ 所有的兄弟元素  */

 <!-- 
        每一个图标当作一个小字体
        习惯把每一个图标放在i标签中
        首先给i标签class名字 iconfont
        然后再添加对应的图标的名称

        把这个当成一个字体来使用就可以了
     -->
     <span>hhhhhhhhhh
         <i class="iconfont icon-fangzi8"></i>
         <i class="iconfont icon-laopobing1"></i>
        
         hhhhhhhhhh
         <i class="iconfont icon-laopobing1"></i>
         <i class="iconfont icon-che5"></i>
         <i class="iconfont icon-meinvguanjia"></i>
         <i class="iconfont icon-qianfenleishouye"></i>
         <i class="iconfont icon-HOMEMESSAGE"></i>
         
     </span>
     <!-- 
        背景图原点的改变 (背景图的起始点)
        background-origin 
            padding-box 背景图像的填充框 默认值
            border-box 背景图像边框的相对位置
            content-box 背景图像的相对位置的内容框
        背景的裁切:
            background-clip:
                padding-box 背景图像填充框的相对位置
                border-box 背景图像边界框的相对位置 默认值
                content-box 背景图像的相对位置的内容框
        背景图的大小:
            background-size: 宽度 高度
                属性值的设置
                    固定大小 100px 200px
                    百分比 100% 100%
                    cover 成比例放大 直到铺满整个容器
                    contain 成比例放大 当背景图的宽或者高度达到最大就停止
                

    -->

标签:css3,h2h2h2h2h2,裁切,元素,兄弟,h2h2h2h2h2h2h2,12313,选择器,ppppppppppppppp
来源: https://blog.csdn.net/qq_44917015/article/details/110306103