前端：巧用CSS伪类，提升布局效率( 二 ) _CSS伪类

:first-of-type
:first-of-type表示一组兄弟元素中其类型的第一个元素。
<!DOCTYPE html><html lang="en"><head><style>div:first-of-type {color: white;background-color: blue;}</style></head><body><div>第一个div</div><div>第二个div</div><div>第三个div</div></body></html>

文章插图

:last-of-type
选择指定类型的最后一个子元素
:last-of-type CSS 伪类表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。

// 最后一个元素的背景色为绿色，文字颜色为白色div:last-of-type {color: white;background-color: green; }

文章插图

nth-of-type()
选择指定类型的子元素
:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

// 第二个元素的背景颜色为橘色，文字颜色为白色div:nth-of-type(2) {color: white;background-color: orange;}

文章插图

:nth-last-of-type()
在列表末尾选择类型的子元素
:nth-last-of-type(an+b) 这个 CSS 伪类匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。

// 倒数第二个元素背景颜色为橘色、文字颜色为白色div:nth-last-of-type(2) {color: white;background-color: orange;}

:link
选择一个未访问的超链接
:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。
为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active 。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。

<!DOCTYPE html><html lang="en"><head><style>a:link {color: orangered;}</style></head><body><a href=https://www.isolves.com/it/cxkf/qd/2022-03-18/"https://www.toutiao.com/">今日头条
百度一下

文章插图

a标签的:link 伪类对未访问的连接颜色为橘色，“今日头条”我已经访问了，颜色切换为了常见的蓝色，“百度一下”未访问文字颜色还是橘色的。
:checked
选择一个选中的复选框
:checked CSS 伪类选择器表示任何处于选中状态的radio(`<input type="radio">`), checkbox (`<input type="checkbox">`) 或("select") 元素中的option HTML元素("option") 。

<!DOCTYPE html><html lang="en"><head><style>input:checked {box-shadow: 0 0 0 3px red;}</style></head><body><input type="checkbox" /></body></html>

文章插图

:valid
选择一个有效的元素
:valid CSS 伪类表示内容验证正确的`<input>` 或其他 `<form>` 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
:invalid
选择一个无效的元素
:invalid CSS 伪类表示任意内容未通过验证的 `<input>` 或其他 `<form>` 元素。

<!DOCTYPE html><html lang="en"><head><style>input {font-size: 18px;outline: none !important;}/* 有效时颜色、边框为绿色 */input:valid {color: green;border: 2px solid green;}/* 无效时颜色、边框为红色 */input:invalid {color: red !important;border: 2px solid red;}</style></head><body><input type="email"></body></html>