伪类是用单冒号表示, 如: link,:visited,:hover,:active,:focus,:first-child,:last-child,:nth-child,:nth-last-child,:not().
1, 用于链接的几个伪类元素
:link 用这个可以设置未被访问的链接的样式
:visited 用这个设置已经被访问的链接的样式
:hover 用于设置将鼠标悬浮在链接上的样式
:active 用于设置鼠标点击链接时到鼠标松开时的样式
:focus 用于设置用键盘将焦点放在链接上时的样式
上面的几个都比较简单. 这里简单以: hover 为例, 讲解 CSS 伪类该怎么使用.(相关课程推荐: CSS 视频教程 https://www.html.cn/css/ )
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <style>
- a:hover{ background-color: yellow; }
- </style>
- </head>
- <body>
- <a href="https://www.html.cn">
- HTML
- </a>
- <a href="http://www.google.com">
- </a>
- <a href="http://www.wikipedia.org">
- Wikipedia
- </a>
- <p>
- <b>
- 注释:
- </b>
- :hover 选择器鼠标指针在其上浮动的链接设置样式.
- </p>
- </body>
- </HTML>
2, 常用于列表元素 < i > 的几个伪类
:first-child 选中列表中的第一个元素
:last-child 选中列表中的最后一个元素
:nth-child() 括号里面的取值可以为三类:
1) 数字 :nth-child(3) 表示选中父元素的第三个子元素
2) 自变量为 n 的表达式 :nth-child(3n) 代表选中父元素的第 3,6,9.....3n 的子元素
3)even 或者 odd 分别代表选中父元素的奇数或者偶数个子元素
:nth-last-child() 与 :nth-child() 的不同点在于, 这个是从最后一个元素开始计算, 取值都是一样的.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <style>
- p:nth-child(3){ background:#ff0000; }
- </style>
- </head>
- <body>
- <h1>
- 这是标题
- </h1>
- <p>
- 第一个段落.
- </p>
- <p>
- 第二个段落.
- </p>
- <p>
- 第三个段落.
- </p>
- <p>
- 第四个段落.
- </p>
- <p>
- <b>
- 注释:
- </b>
- Internet Explorer 不支持 :nth-child() 选择器.
- </p>
- </body>
- </HTML>
注意是 p 元素的父元素 < body > 的第三个子元素哟, 所以背景色才会出现在那个位置!!
3,:not() 元素的使用
这个元素的使用很简单, 举个栗子即可
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <style>
- p{ color:#000000; } :not(p){ color:#ff0000; }
- </style>
- </head>
- <body>
- <h1>
- 这是标题
- </h1>
- <p>
- 这是一个段落.
- </p>
- <p>
- 这是另一个段落.
- </p>
- <div>
- 这是 div 元素中的文本.
- </div>
- </body>
- </HTML>
选中非 < p > 的其他所有元素
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/15738.html