CSS基础之伪类和伪元素
伪类
伪类是特殊的选择器，用于选择特定状态的元素。例如：鼠标悬停在元素上、第一个元素等。它表现的就像是向HTML元素添加了一个类一样。可以帮你减少在HTML中显示指定类，使代码更灵活，更好维护。
列表（部分）
位置相关
| 伪类 | 介绍 |
|---|---|
:root |
匹配文档树根元素，对于HTML来说就是<html>，相比于html选择器它的优先级更高。 |
:first-child |
表示一组兄弟元素的第一个元素。 |
:first-of-type |
同一组类型元素的第一个 |
:last-child |
表示一组兄弟元素的最后一个元素。 |
:last-of-type |
同一组类型元素的最后一个 |
:only-child |
匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者*:nth-child(1):nth-last-child(1)*，当然前者的权重会低一点。 |
:only-of-type |
代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 |
:nth-child() |
首先找到所有当前元素的兄弟元素, 用 n 来筛选出在当前元素的兄弟元素节点的位置。 |
:nth-last-child() |
与:nth-child()一样，只是它是从后往前计数。 |
:nth-of-type() |
针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。 |
:nth-last-of-type() |
与nth-of-type一样，只是它是从后往前计数。 |
表单相关
| 伪类 | 介绍 |
|---|---|
:autofill |
当input元素值被浏览器自动填充时，会匹配，用户编辑字段，则停止匹配。 |
:default |
匹配表单中默认选中的元素。 |
:invalid |
验证失败的input、fieldset或其它form元素。 |
:valid |
验证成功的input、fieldset或其它form元素。 |
:disabled |
禁用的元素。 |
:enabled |
启用的元素。 |
:empty |
表示没有子元素的元素，子元素可以是元素、也可以是文本（包括空格）。注释、处理指令和CSS内容不会影响元素是否为空。 |
:required |
设置了required属性的input、select、textarea元素。 |
:optional |
表示没有required属性的<input>、<select> 或 <textarea>。 |
:read-only |
用户不可编辑的元素（input或textarea）。 |
:read-write |
用户可以编辑的元素（input或textarea）。 |
:focus |
获得焦点的元素（如表单输入），当用户点击元素或通过键盘的tab键选择元素时会被触发。 |
:focus-within |
表示一个元素获得焦点，或该元素的后代元素获得焦点。 |
:in-range |
匹配当前值在min和max之间的input元素。 |
:out-of-range |
匹配当前值在min和max之外的input元素。 |
:indeterminate |
表示状态不确定的表单元素（例如值小于100的progress）。 |
链接相关
| 伪类 | 介绍 |
|---|---|
:link |
匹配所有具有href属性的未被访问的元素，例如：a、area、link。 |
:any-link |
匹配所有具有href属性的a、area、link元素。 |
:visited |
被用户访问过的链接元素（具有href属性的a和area元素），出于隐私原因，使用该伪类修改的样式非常有限。:vistited放在:link之后:hover和:active之前。 |
:hover |
被用户将光标悬停的元素，由:hover伪类定义的样式可以被其它链接相关的伪类（:link、:vistited、:active）覆盖。:hover规则放在:link和:vistited之后:active之前。 |
:active |
被用户激活的元素，例如：当用户使用鼠标按下按钮开始。 |
:target |
URL片段匹配的唯一页面元素。 |
打印相关
| 伪类 | 介绍 |
|---|---|
:first： |
和@page at-rule一起使用，表示打印文档的第一页。 |
:right： |
和@page at-rule一起使用，表示打印文档的所有右侧页面。 |
:left： |
和@page at-rule一起使用，表示打印文档的所有左侧页面。 |
其它
| 伪类 | 介绍 |
|---|---|
:is() |
匹配提供的选择器列表中任意一个的元素（用来替换matches）。 |
:not() |
不匹配提供的选择器列表中任意一个的元素。 |
:lang() |
匹配元素的lang属性。 |
:where() |
它与:is()的区别是，不增加权重。 |
:picture-in-picture |
匹配当前处于画中画模式的元素。 |
例子（部分）
示例-1（A元素样式）
/* 默认样式 */
:link{display: block;padding: 0px 30px 0px 30px;border: 1px red solid;width: 50px;color: red;text-decoration:blink;
}/* 访问过 */
:visited{display: block;padding: 0px 30px 0px 30px;border: 1px red solid;width: 50px;color: gainsboro;text-decoration:blink;
}/* 鼠标悬停 */
:hover{color: yellow;
}/* 鼠标按下 */
:active{color: yellowgreen;
}
<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="伪元素A元素.css"><style></style></head><body><div><a href="https://www.baidu.com?a=1">百度</a></div></body>
</html>
示例-2（表单校验）
/* 邮箱校验 */
input[type=email]:valid{border: solid 1px yellowgreen;
}
input[type=email]:invalid{border: solid 2px red;
}
input[type=email]:focus{outline: solid 1px yellow;
}/* 数值校验 */
input[type=number]:in-range{border: solid 1px yellowgreen;
}
input[type=number]:out-of-range{border: solid 2px red;
}
input[type=number]:focus{outline: solid 1px yellow;
}
<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="表单校验.css"><style></style></head><body><form><input type="email" /><input type="number" min="60" max="80"></form></body>
</html>
示例-3（第一个段落）
@charset "utf-8";/* 伪类：匹配article下的第一个p子元素 */
article p:first-child {font-size: 120%;font-weight: bold;
}
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="CSS语法2.css"><style></style></head><body><article><!-- <p>滕王阁序</p> --><p> 豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p><p> 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。</p></article></body>
</html>
伪元素
伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。
列表（部分）
| 伪类 | 介绍 |
|---|---|
| ::after | 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 |
| ::before | 用来创建一个伪元素，作为已选中元素的第一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。 |
| ::file-selector-button | 代表 type="file"的按钮。 |
| ::first-letter | 代表块级元素第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。 |
| ::first-line | 代表块级元素的第一行。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的字体大小。 |
| ::marker | 代表列表的标记框，它作用在设置了display: list-item的元素和伪元素上，例如li和summary。 |
| ::selection | 代表获得焦点的元素，例如通过鼠标或tab选中的元素。 |
列子（部分）
示例-4（列表）
li::marker{content: '★ ';font-size: 1.2em;
}
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="标记框.css"><style></style></head><body><ul><li>李白</li><li>辛弃疾</li><li>李清照</li><li>苏轼</li><li>范仲淹</li><li>王安石</li><li>司马光</li></ul></body>
</html>
示例-5（首行）
/* 首字 */
p::first-line{color: gold;
}
/* 首行 */
p::first-letter{color: yellowgreen;font-size: 1.2em;
}
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="首行.css"><style></style></head><body><p>豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p></body>
</html>
示例-5（按钮角标）
button {border: 1px yellowgreen solid;padding: 0px 0px 0px 0px;width: 100px;height: 30px;
}
button > span{margin:0px 0px 0px 0px;
}
button::before {display: inline-block;width: 15px;height: 15px;border: 2px yellowgreen solid;content: "";border-radius:50%;position: relative;top: 3px;left: -9px;
}button::after {display: inline-block;width: 5px;height: 5px;border: 2px navajowhite solid;background-color: navajowhite;content: "";border-radius:50%;position: relative;top: -2px;left: -49px;
}
<!doctype html>
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="第一个子元素.css"><style></style></head><body><button><span>保存</span></button></body>
</html>
结合使用
示例6（第一段落的第一行）
article p:first-child::first-line {font-size: 120%;font-weight: bold;
}
<html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charset="ASCII"/><meta property="og:locale" content="zh-CN"/><title>CSS基础语法</title><link rel="stylesheet" href="结合使用.css"><style></style></head><body><article><!-- <p>滕王阁序</p> --><p> 豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。</p><p> 时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。</p></article></body>
</html>