一, 伪类选择器
伪选择器弥补了常规选择器的不足, 能够实现一些特殊情况下的样式, 例如在鼠标悬停时或只给字符串中的第一个字符指定样式. 与类选择器类似, 可以从 html 元素的 class 属性中查看到, 但伪选择器不会出现在 HTML 文档中 (有几个例外, 如: lang,::placeholder 等). 并且它的关键字大小写不敏感, 也就是说 empty 和 EMPTY 完全相同. 伪选择器分为两种: 伪类选择器和伪元素选择器. 注意, 伪选择器会以一个或两个冒号(:) 开头, 并且如果要与其它选择器组合使用, 那么只能与类型选择器 (即元素名) 搭配.
本节要介绍的是伪选择器的第一种: 伪类选择器(pseudo-class selector), 它用于描述元素的动态特征, 再根据元素的特殊状态来选择元素, 常用的有结构, 链接和表单等伪类. 注意, 伪类只对它依附的元素起作用, 并且多个伪类可拼接在一起.
1)结构伪类
CSS3 新增了许多与结构相关的伪类, 例如: root 和: empty.:root 会匹配文档的根元素, 而在 HTML 文档中, 根元素是 HTML.
:empty 匹配没有子元素的元素, 包括文本节点, 但不包括注释. 下面三个 p 元素, 只有第一个和第三个符合: empty 的匹配条件.
- <p>
- </p>
- <p>
- </p>
- <p>
- <!-- 注释 -->
- </p>
:first-child 匹配一组兄弟元素中的第一个元素, 而: last-child 可匹配其中的最后一个.:first-of-type 匹配一组兄弟元素中的某种类型的第一个元素, 而: last-of-type 可匹配其中的最后一个.
以下面的 HTML 结构为例, p 是三个元素中的第一个, 因此可以使用 p:first-child; 而 div 并不在第一的位置上, 因此 div:first-child 无效; 但是 div 是该类型的第一个元素, 因此可用: first-of-type 匹配.
- <style>
- p:first-child {
- background: #FC0;
- }
- div:first-child {
- background: #000;
- }
- div:first-of-type {
- background: #666;
- }
- </style>
- <p>1</p>
- <div>2</div>
- <section>3</section>
:only-child 匹配没有兄弟的元素, 即该元素是另一个元素的唯一子元素. 例如下面有两个 p 元素, 采用: only-child 伪类时, 只有第一个符合匹配条件.
- <style>
- p:only-child {
- background: #F60;
- }
- </style>
- <div>
- <p>1</p>
- </div>
- <p>2</p>
注意, 将: first-child 和: last-child 两个伪类拼接, 其效果相当于: only-child.
:only-of-type 匹配没有相同类型的兄弟元素, 如果将: only-of-type 依附到上面 HTML 结构中的 p 元素上, 那么两个 p 元素都能匹配.
:nth-child()会找出该元素的所有兄弟元素, 然后按照位置匹配. 它类似于一个函数, 可接收整数和表达式, 并将计算结果作为元素所处的位置. 下面有 3 个 li 元素,:nth-child(1)匹配第一个元素, 相当于: first-child; 第二个: nth-child()伪类接收一个 2n 表达式, 其中 n 的取值从 0 开始, 一直到无穷大, 2n 表示取偶数位置的 li 元素, 下面的 li 元素只有第二个符合条件.
- <style>
- li:nth-child(1) {
- background: #666;
- }
- li:nth-child(2n) {
- background: #F60;
- }
- </style>
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- </ul>
:nth-last-child()的功能与: nth-child()类似, 只是地从后往前匹配.
:nth-of-type()的功能与: nth-child()相似, 但需要限制元素类型 (即匹配相同类型的元素), 它可接收的参数与: nth-child() 相同. 以下面的 HTML 结构为例, p:nth-of-type(2n)会先过滤出 p 元素, 然后再匹配偶数位置的 p 元素. 虽然第一个 p 元素在 HTML 结构中所处的是偶数位置, 但是在同类型的兄弟元素中所处的却是奇数位置, 因此无法匹配.
- <style>
- p:nth-of-type(2n) {
- background: #FC0;
- }
- </style>
- <section>1</section>
- <p>2</p>
- <p>3</p>
- <div>4</div>
与: nth-of-type()对应的是: nth-last-of-type(), 需要从后往前匹配.
2)链接伪类
在链接元素中, 常用的 4 个伪类有未访问 (:link), 已访问(:visited), 激活(:active) 和悬停 (:hover), 分别表示 4 种状态. 它们的声明顺序推荐使用 LVHA, 通常这 4 个伪类会使用同一个源声明, 4 个伪类的特殊性(将在第二章讲解) 也相同, 如下代码所示, 因此影响权重的只有在样式表中所处的位置了.
- a:link {
- color: blue;
- }
- a:visited {
- color: red;
- }
- a:hover {
- color: green;
- }
- a:active {
- color: yellow;
- }
当鼠标悬浮在未访问或已访问链接的时候, 都会同时存在两种状态,:link 与: hover 或: visited 与: hover. 如果: hover 声明在: link 或: visited 之前, 那么就会被覆盖掉. 当鼠标点中链接的时候, 会同时存在两种状态,:active 与: hover. 如果: active 声明在: hover 之前, 那么会被覆盖掉. 因此: hover 与: active 必须在: link 与: visited 之后, 而: active 必须在: hover 之后, 至于: link 与: visited, 它们两个的顺序可以互换. 将 LVHA 记成两个单词的组合, love 和 hate, 能更易于记忆.
还有一种: focus 伪类更多地用于表单元素, 可在元素聚焦时生效, 例如为文本框添加: focus, 如下所示. 在下图中, 右边是获得输入焦点时文本框的样式.
- <style>
- input:focus {
- background: #F60;
- }
- </style>
- <input type="text" />
3)表单伪类
这种伪类专门服务于表单控件, 根据用户与表单控件的交互, 来反映其某种状态.
:enabled 和: disabled 分别应用于控件的启用和禁用状态, 如下代码所示, 文本框默认是启用状态, 第二个文本框设置了 disabled 属性, 变成禁用状态.
- <style>
- input:enabled {
- background: #FC0;
- }
- input:disabled {
- background: #000;
- }
- </style>
- <input type="text"/>
- <input type="text" disabled/>
:checked 应用于单选框或复选框的选中状态.:required 和: optional 应用于控件的必选和可选状态, 即前者可匹配带有 required 属性的控件, 而后者正好相反.
:valid 和: invalid 用于验证文本框中的数据是否有效, 前者是有效, 后者是无效, 例如将文本框的格式限制为电子邮件, 当格式不正确时, 修改文本框的背景, 如下所示.
- <style>
- input[type=email]:invalid {
- background: #F60;
- }
- </style>
- <input type="email"/>
:read-write 和: read-only 应用于文本框的读写和只读状态, 如下代码所示, 文本框默认是读写状态, 第二个文本框设置了 readonly 属性, 变成只读状态.
- <style>
- input:read-write {
- background: #FC0;
- }
- input:read-only {
- background: #F60;
- }
- </style>
- <input type="text"/>
- <input type="text" readonly/>
:in-range 和: out-of-range 应用于数值类型的文本框, 如果当前值处于 min 和 max 两个属性限定的范围之内, 那么可使用: in-range 装饰, 否则使用: out-of-range. 在下面的示例中, 当输入 0 或 6 时, 文本框的背景就会改变.
- <style>
- input[type=number]:out-of-range {
- background: #F60;
- }
- </style>
- <input type="number" min="1" max="5"/>
4)其它伪类
URL 的锚点指向的目标元素可以用: target 装饰, 例如有一个 h3 元素(如下所示), 其 id 属性的值为 title, 当 URL 是 http://www.pwstrick.com#title 时, 就会改变 h3 元素的字体颜色.
- <style>
- h3:target {
- color: #FC0;
- }
- </style>
- <h3 id="title">:target</h3>
:lang()会基于语言来匹配元素, 在 HTML 中, 语言可以通过 lang 属性, meta 元素或协议的信息来确定(例如 HTTP 首部). 下面两个 p 元素, 只有用英语编写的元素才会被加粗.
- <style>
- p:lang(en) {
- font-weight: bold;
- }
- </style>
- <p lang="en">My name is Strick</p>
- <p lang="fr">My name is Strick</p>
:not()是一种反选伪类, 它能接收一个简单的选择器, 例如类型, 属性, 通配等, 不能接收伪类, 伪元素和群组选择器. 在下面的示例中, 会为非 p 元素改变字体颜色.
- <style>
- :not(p) {
- color: #FC0;
- }
- </style>
- <span>1</span>
- <p>2</p>
- <div>3</div>
注意,:not()伪类不能嵌套, 但是能串联, 如下代码所示, 其中: not(p):not(span)表示一种或的关系, 即匹配的元素即不能是 p, 也不能是 span.
- /* 正确 */
- :not(p):not(span) {
- color: #FC0;
- }
- /* 错误 */
- :not(p, span) {
- color: #FC0;
- }
二, 伪元素选择器
伪元素选择器 (pseudo-element selector) 用于处理文档内容, 可指定某处的内容 (即过滤内容) 或添加内容. 早期的时候, 伪元素和伪类都使用单冒号(:). 但最新的 CSS3 规定伪元素得使用双冒号(::), 伪类用单冒号, 这样两者的区分能更明显. 注意, 伪元素只能出现在选择器的最后位置, 并且不能同时定义多个伪元素.
1)过滤内容的伪元素
::first-letter 会匹配块级元素内容的第一行的首字符, 下面的 p 元素包含一段文本, 首字母 "s" 的字体会扩大一倍.
- <style>
- p::first-letter {
- font-size: 200%;
- }
- </style>
- <p>strick</p>
当::first-letter 依附的元素同时还指定了::before 时, 它会匹配 content 属性中的首字符, 如下所示, 被扩大的不是 "s" 而是 "i".
- <style>
- div::first-letter {
- font-size: 200%;
- }
- div::before {
- content: "is";
- }
- </style>
- <div>strick</div>
若要匹配块级元素内容的第一行, 可以使用::first-line, 例如将第一行加粗, 如下所示.
- <style>
- p::first-line {
- font-weight: bold;
- }
- </style>
- <p>My name is Strick.I am from China.</p>
::first-letter 和::first-line 对可使用的属性也做了限制, 例如字体, 背景等属性允许使用.
其它常用的伪元素还有::placeholder 和::selection, 前者可自定义表单控件占位文本的样式, 后者可装饰选中内容(即被用户高亮的部分). 下面文本框定义了 placeholder 属性并声明了::placeholder 伪元素, 占位文本会变成红色.
- <style>
- input::placeholder {
- color: red;
- }
- </style>
- <input type="text" placeholder="请输入"/>
2)添加内容的伪元素
::before 可在元素之前插入修饰性的内容,::after 可在元素之后插入修饰性的内容, 两个伪元素创建出的虚拟元素默认为行内元素. 下面的 p 元素声明了::before 和::after, 经过拼接后, 在页面上显示的文本为 "I am Strick".
- <style>
- p::before {
- content: "I"
- }
- p::after {
- content: "Strick"
- }
- </style>
- <p>am</p>
注意,::before 和::after 不能应用于替换元素, 例如 img,input 等.
posted on 2020-04-07 07:35 咖啡机(K.F.J) 阅读(...) 评论(...) 编辑 收藏
来源: https://www.cnblogs.com/strick/p/12519389.html