意见箱
恒创运营部门将仔细参阅您的意见和建议,必要时将通过预留邮箱与您保持联络。感谢您的支持!
意见/建议
提交建议

css3伪类选择器有哪些

来源:佚名 编辑:佚名
2024-07-12 16:30:45
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时,了解和合理运用这些伪类选择器将大大提升代码的效率和页面的美观性。

本网站发布或转载的文章均来自网络,其原创性以及文中表达的观点和判断不代表本网站。
上一篇: Python工程师是干啥的 下一篇: css3伪类是什么