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