H5伪类,伪元素

伪类选择器
1.first-child:匹配父类元素下的第一个子元素。div > a:first-child; 2.last-child:匹配父类元素下的最后一个子元素。 3.nth-child(n):匹配父类元素下的第几个子元素,odd为奇数,even为偶数,或者用n的表达式来取元素,如2n+1。 4.nth-last-child(N):匹配父元素下的倒数第几个子元素。 5.nth-of-type(n):匹配父元素下同一种类型的第几个子元素。 6.nth-last-of-type(n):匹配父元素下同类型倒数第几个元素。 7.first-of-type:匹配父元素下同类型第一个元素。 8.last-of-type:匹配父元素下同类型最后一个元素。 9.only-child:匹配父元素下只有一个子元素的元素。 10.only-of-type:匹配父元素下同类型只有一个元素的元素。

11.empty:匹配父元素下内容为空的子元素。

伪元素
1.::first-line:第一行元素。作用于块级元素。
2.::first-letter:第一个字。作用于块级元素。
3.::before:在内容之前,配合content使用。作用行级元素。
4.::after:在内容之后,配合content使用。作用行级元素。
5.::selection用于设置在浏览器中选中文本后的背景色与前景色。

转载于:https://www.cnblogs.com/island1994/p/9224593.html

你可以尝试以下代码实现你的需求: HTML代码: ```html <div class="tu"> <img src="img/11.jpg"> </div> ``` CSS代码: ```css .tu { position: relative; width: 400px; /* 图片宽度 */ height: 300px; /* 图片高度 */ overflow: hidden; /* 隐藏超出部分 */ } .tu:before, .tu:after { content: ""; position: absolute; top: 50%; /* 上下居中 */ margin-top: -20px; /* 图标高度的一半 */ width: 40px; /* 图标宽度 */ height: 40px; /* 图标高度 */ background-color: rgba(0, 0, 0, 0.5); /* 图标背景颜色 */ color: #fff; /* 图标颜色 */ text-align: center; line-height: 40px; font-size: 24px; cursor: pointer; opacity: 0; /* 初始透明度为0 */ transition: all 0.3s; /* 过渡效果 */ } .tu:before { left: 10px; /* 左图标位置 */ content: "<"; } .tu:after { right: 10px; /* 右图标位置 */ content: ">"; } .tu:hover:before, .tu:hover:after { opacity: 1; /* 鼠标悬停时透明度为1 */ } .tu:hover:before { left: 0; /* 左图标位置调整 */ } .tu:hover:after { right: 0; /* 右图标位置调整 */ } ``` 解释: 1. 使用 `position: relative` 让 `.tu` 相对定位,以便后续绝对定位图标的参考点。 2. 使用 `overflow: hidden` 隐藏超出部分,以确保只显示一张图片。 3. 使用 `:before` 和 `:after` 伪元素在左右两侧添加图标,并使用 `opacity` 控制初始透明度为0,使用 `transition` 添加过渡效果。 4. 使用 `:hover` 伪类控制鼠标悬停时图标的透明度和位置。 注意: 1. 图标样式可以根据需要自行调整。 2. 图片宽度和高度需要根据实际情况设置。 3. 图片需要放在 `.tu` 容器内,否则图标可能会出现定位问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值