CSS3伪类选择器包括::root、:not()、:empty、:target、:enabled、:disabled、:checked、:nthchild()、:nthlastchild()、:nthoftype()、:nthlastoftype()、:firstoftype()、:lastoftype()、:onlychild()、:onlyoftype()、:firstchild()、:lastchild()、:odd和:even。这些伪类选择器可以帮助我们更精确地选取元素,实现更丰富的样式效果。
.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.9969.net/23008.html