.tudou:hover::after {
display: block;
width: 100%;
height: 100%;
backgroundcolor: rgba(0,0,0,0.5); // 遮罩层
}
<img src="tudou.jpg" alt="土豆视频">
CSS3伪类选择器是用于选择特定状态的元素,例如链接的未访问、已访问、悬停、激活和焦点状态,它们为网页设计提供了极大的灵活性和便利性,以下是具体分析:
1、动态伪类选择器:
:link
选择未被访问过的超链接。
:visited
选择已被访问过的超链接。
:hover
选择鼠标悬停在其中的元素。
:active
选择鼠标按下未松开的元素。
:focus
选择获取焦点的表单元素。
2、目标伪类选择器:
:target
选择当前锚点指向的元素。
3、语言伪类选择器:
:lang()
根据HTML的lang属性选择元素。
4、UI元素伪类选择器:
:enabled
选择可用的表单控件。
:disabled
选择不可用的表单控件。
:checked
选择被选中的单选按钮或复选框。
5、结构伪类选择器:
:root
选择文档的根元素。
:empty
选择无任何内容的元素。
:firstchild
选择所有兄弟元素中的第一个。
:lastchild
选择所有兄弟元素中的最后一个。
:nthchild(n)
选择所有兄弟元素中的第n个。
:nthlastchild(n)
选择所有兄弟元素中的倒数第n个。
:onlychild
选择没有兄弟元素的元素。
:firstoftype
选择所有兄弟元素中同类型的第一个。
:lastoftype
选择所有兄弟元素中同类型的最后一个。
:nthoftype(n)
选择所有兄弟元素中同类型的第n个。
:nthlastoftype(n)
选择所有兄弟元素中同类型的倒数第n个。
:onlyoftype
选择没有同类型兄弟元素的类型。
6、否定伪类选择器:
:not(selector)
排除满足括号中选择器的元素。
是CSS3中常见的伪类选择器的最新信息,使用这些选择器可以精准地选定特定状态下或者位置的元素,极大地增强了样式的适应能力和页面的表现力,在编写CSS时,了解和合理运用这些伪类选择器将大大提升代码的效率和页面的美观性。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/770637.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复