css伪类选择器是CSS3新增的一个特性,它允许我们针对元素的状态进行样式设置,常用的CSS伪类选择器有以下几种:,1、:hover,,当鼠标悬停在元素上时触发的样式。,“`css,a:hover {,color: red;,},“`,2、:active,当元素被激活(如点击按钮)时触发的样式。,“`css,button:active {,background-color: yellow;,},“`,3、:focus,当元素获得焦点时触发的样式。,“`css,input:focus {,border: 1px solid blue;,},“`,4、:visited,,当链接被访问过时触发的样式。,“`css,a:visited {,color: purple;,},“`,5、:first-child,当元素是其父元素的第一个子元素时触发的样式。,“`css,ul li:first-child {,font-weight: bold;,},“`,6、:last-child,当元素是其父元素的最后一个子元素时触发的样式。,“`css,ul li:last-child {,border-bottom: none;,},“`,7、:nth-child(n),,当元素是其父元素的第n个子元素时触发的样式。,“`css,ul li:nth-child(odd) {,background-color: f2f2f2;,},ul li:nth-child(even) {,padding-left: 10px;,},“`,8、::before/::after,在元素内容前或后插入内容。,“`css,p::before {,content: “※”;,},p::after {,content: “***”;,},“`,9、not() pseudo-class selectors in CSS3 and later versions of Internet Explorer (IE) support the negation operator “!” to exclude elements from matching a certain style rule. For example, to apply a different style to all list items except those with a class of “active”: css pseudo-class selectors can be used to apply different styles to different elements based on their state or characteristics. For example, we can use the
:hover
pseudo-class to change the color of an element when the mouse pointer is over it, and the
:active
pseudo-class to change the background color of an element when it is being clicked or activated by the user.
css中常用的伪类选择器
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《css中常用的伪类选择器》
文章链接:https://zhuji.vsping.com/487500.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
文章名称:《css中常用的伪类选择器》
文章链接:https://zhuji.vsping.com/487500.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。