本篇介绍伪类选择器以及伪元素。
1、类选择器
在 css 中可以使用类选择器把相同的元素定义成不同的样式。比如:
p.left{text-align: left} p.rigth{text-align: right}
2、伪类选择器
区别
类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是 CSS 中已经定义好的选择器,不可以随意起名。
常见的伪类选择器:
a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active{ color: #55b28e } /* 正在被点击的链接 */
3、伪元素选择器
伪元素选择器,针对于 CSS 中已经定义好的伪元素使用的选择器。
使用方法:
选择器:伪元素 {属性:值}
与类配合使用
选择器. 类名:伪元素 {属性:值}
四个伪元素选择器。
1)、first-line 伪元素选择器
first-line 伪元素选择器用于向某个元素中的第一行文字使用样式。
2)、first-letter 伪元素选择器
first-letter 伪元素选择器用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉字)使用样式。
3)、before 伪元素选择器
before 伪元素选择器用于在某个元素之前插入一些内容。
4)、after 伪元素选择器
after 伪元素选择器用于在某个元素之后插入内容。
-----------------------------例子
<!DOCTYPE html> <html> <head lang="zh"> <title>伪元素</title> <style> p:first-line { color: #f60; } p:first-letter { color: green; font-size: 24px; } li { list-style: none; } li:before { content: '__before前面追加__'; color: red; } li:after { content: '__after追加__'; color: #ff6600; } </style> </head> <body> <p> 在CSS中,主要有四个伪元素选择器<br /> first-line伪元素选择器用于向某个元素中的第一行文字使用样式。 </p> <ul> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> <li><a href="index1.html">伪类选择器</a></li> </ul> </body> </html>
5、结构性伪类选择器 root、not、empty 和 target
1)、root 选择器
root 选择器将样式绑定到页面的根元素中。
2)、not 选择器
想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,我们就可以使用 not 选择器。
3)、empty 选择器
empty 选择器指定当元素中内容为空白时使用的样式。
-----------------------例子
<!DOCTYPE html> <html> <head lang="en"> <title>not选择器</title> <style> :root { background: #126fb0; } body *:not(h1) { background: #fff; } :empty { background: #ff6600; } </style> </head> <body> <h1>h1标题</h1> <hr /> <table border="1" cellpadding="0" cellspacing="0" width="30%"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td></td> <td>4</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td></td> </tr> </table> </body> </html>
4)、target 选择器
target 选择器对页面中某个 target 元素指定样式,该样式只在用户点击了页面中的超链接,并且跳转到 target 元素后起作用。
<!DOCTYPE html> <html> <head lang="en"> <title>TARGET</title> <style> :target{ background: #000; color: #fff; } </style> </head> <body> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <div id="A"> <h2>标题</h2> <p>内容.........</p> </div> <div id="B"> <h2>标题</h2> <p>内容.........</p> </div> <div id="C"> <h2>标题</h2> <p>内容.........</p> </div> <div id="D"> <h2>标题</h2> <p>内容.........</p> </div> </body> </html>
6、选择器 first-child、last-child、nth-child 和 nth-last-child
1)、first-child 选择器
first-child 单独指定第一个子元素的的样式。
2)、last-child 选择器
last-child 单独指定最后一个子元素的的样式。
3)、nth-child 选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd) 选择器匹配正数下来第奇数个子元素
nth-child(even) 选择器匹配正数下来第偶数个子元素
4)、nht-last-child 选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd) 选择器匹配倒数数下来第奇数个子元素
nth-last-child(even) 选择器匹配倒数下来第偶数个子元素
7、only-child 选择器
only-child 选择器,只对唯一的子元素起作用。
<!DOCTYPE html> <html> <head lang="en"> <title>选择器first-child、last-child、nth-child和nth-last-child</title> <style> li:first-child { background: #ff6600; } li:last-child { background: green; } li:nth-child(odd) { background: red; } li:nth-child(even) { background: #ff6600; } li:only-child { background: #ff1b00; } </style> </head> <body> <h1>唯一的:li:only-child</h1> <ul> <li>第一个项目</li> </ul> <hr /> <h1>很多的</h1> <ul> <li>第1个项目</li> <li>第2个项目</li> <li>第3个项目</li> <li>第4个项目</li> <li>第5个项目</li> <li>第6个项目</li> <li>第7个项目</li> <li>第8个项目</li> </ul> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战