伪类

简介

1 .不仅仅可以根据文档DOM树中的内容对元素应用样式,还允许你根据比如像导航历史这样的外部因素来应用样式

全部伪类集合

1 .active:鼠标按下和松开的这一段时间,任意元素好像都可以.这里的效果应该比hover的在深一点.一般用在a,button元素上.拖拽的元素也可以使用这个..为了生效,是有排序的lvha,这个要放在最后面
2 .visited:显示用户已经访问过的链接.出于隐私,这里选择器可以修改的样式非常有限

1 .但是实际这个优先级特别高.没访问也是这个颜色,会覆盖正常的a{color:red}这种样式的
2 .:link — :visited — :hover — :active 要按照这个顺序设置
3 .可以被修改的属性:color,background-color,border-color,column-rule-color,outline-color.基本是一些颜色,别的都不行
4 .动画的时候可以操作的SVG的fill,stroke属性
5 .getComputedStyle方法只会返回非访问的颜色.而不是这些会改变的颜色

3 .hover:鼠标悬浮上去.
4 .link:指向所有没有被访问的链接.要注意和前面的关系.这种最后实在效果无法实现,可以上js了
5 .any-link:选择到一个有链接的元素,不管是否被访问,也就是匹配每一个href属性的<a>,<area>,<link>.也会匹配到所有的:visited,link.
6 .checked:任何被选中的元素,radio,checkbox,select的option(这个竟然也可以)
7 .default:匹配到默认选中的元素.radio,checkbox,select的option(这个竟然也可以).允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 :default 伪类表示。例如，您可以在一组复选框之间设置默认复选框
8 .defined:任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素.比如以下操作

customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');

      let shadowRoot = this.attachShadow({mode: 'open'})
        .appendChild(divElem);
  }
})
//这个主要是用来你有一个复杂的自定义元素需要一段时间才能加载到页面中时非常有用 —— 你可能想要隐藏元素的实例直到定义完成为止，这样你就不会在页面上出现一些难看的元素

//但是这个一般不是都有loading么

9 .disabled:示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。元素还有一个启用状态（enabled state），在启用状态下，元素可以被激活或获取焦点。
9.1 enabled:表示任何被启用的（enabled）元素。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的。元素也有一个禁用的状态（disabled state），在被禁用时，元素不能被激活或获取焦点.，当文本输入框处于启用状态时
10 .empty:没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响.也就是里面有空格不行,有其它元素不行.可以允许有注释
11 .first:打印文档的时候,第一页的样式.能改的css属性极其有限.

@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

12 . first-child:一组元素中的第一个.一组p里面的第一个,ul里面的第一个li.不过first和first-child差的还停多的. 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素

image.png

p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；

h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；

span:first-child  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；

13 .first-of-type表示一组兄弟元素中其类型的第一个元素。 匹配的是某父元素下相同类型子元素中的第一个

p:first-of-type  匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个；

h1:first-of-type  匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个；

span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个。

13.1 .last-child,last-of-child同理.都是一样的.

14 .focus:表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发

15 .focus-within:如果要选择包含焦点元素的元素.表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配.子元素也触发focus,父元素也会触发.方向包起来.子元素匹配,父元素响应

16 .host:选择包含其内部使用的CSS的shadow DOM的根元素 - 换句话说，这允许你从其shadow DOM中选择一个自定义元素.在shadow DOM之外使用时，这没有任何效果。

17 .hover:用户使用指示设备虚指一个元素（没有激活它）的情况.注意这里的没有激活.激活就是另一个样式了

1 .这个样式会被任何与链接相关的伪类重写，像:link:visited, :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。
2 .在触摸屏上 :hover 有问题，基本不可用。不同的浏览器上:hover 伪类表现不同。 可能从不会触发；或者在触摸某元素后触发了一小会儿；或者总是触发即使用户不在触摸了，直到用户触摸别的元素
3 .触摸屏不要依赖这个样式实现一些展示的操作
4 .:hover伪类可以任何伪元素上使用
//hover出现下拉列表
div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

18 .:indeterminate表示状态不确定的表单元素

1 .checkbox 被js设置为:indeterminate
2 .radio表单中拥有相同 name值的所有单选按钮都未被选中时
3 .progress元素处于不确定状态

19 .in-range:值处于min和max之间.只有<input>元素可以

1 .该伪类仅适用于那些拥有（或可以接受）取值范围设定的元素。若缺少此类设定，元素值就无所谓“in-range”和“out-range”

20 .invalid.表示通过验证的input或form元素

1 .若一组单选钮被设定为必须选定一个，在该组中没有按钮被选中的情况，:invalid伪类被应用到该组中的所有按钮。（单选钮组按照name属性共享相同值。）

21 .lang(en)基于元素语言来匹配页面

1 .在HTML中, 语言是通lang属性,和 <meta>元素的组合来决定的, 也可能是通过协议的信息来确定（例如HTTP头）
2 .还可以自动切换语言

//根据语言设置样式
https://developer.mozilla.org/zh-CN/docs/Web/CSS/quotes
<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
quotes 属性设置嵌套引用（embedded quotation）的引号类型
//这个操作也有点骚,<q>相当于一个占位符,然后css竟然还能用这个属性给替换了,有一种js的感觉,模板语法的操作

22 .left,right:打印相关.对打印文档的左侧页设置CSS样式

/* 设置打印时的左侧文档样式 */
@page :left {
  margin: 2in 3in;
}
1 .能控制的css属性极其有限.仅仅是margin,padding,border,background

23 .not用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类

.not(p):选中所有不是p的元素
p:not(.fancy) {
  color: green;
}选中p里面标签不是fancy的.
1 .不能嵌套..not(.not)这样是不对的
2 .由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器将不会工作
3 .可以利用这个伪类写一个完全没有用处的选择器。例如， :not(*) 匹配任何非元素的元素，因此，这个规则将永远不会被应用
4 .提高标签的优先级 #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。

24 .only-child:匹配没有兄弟节点的元素.只有自己一个
25 .only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素.没有相同的自己
26 .optional:没有requrire的属性的input元素,select,textarea,
27 .past:一个时间维度的伪类，它将匹配完全出现在匹配元素之前的任何元素
28 .placeholder-shown:输入那个闪烁的线的颜色.这个竟然是一个实验性质的api
29 .read-only:表示元素处于不可被用户编辑的状态

1 .不仅仅匹配到具有readonly属性的input元素,其他不能被用户编辑的元素都会被用户匹配
<input type="text" value="Type whatever you want here.">
<input type="text" value="This is a read-only field." readonly>
<p>This is a normal paragraph.</p>
<p contenteditable="true">You can edit this paragraph!</p>

input { min-width: 25em; }
input:-moz-read-only { background: cyan; }
input:read-only { background: cyan; }

p:-moz-read-only { background: lightgray; }
p:read-only { background: lightgray; }
p[contenteditable="true"] { color: blue; }

30 .read-write:代表一个元素(可输入文本的input元素),可以被用户编辑

1 .这个选择器不仅仅选择input元素,也会选择所有可以被用户编辑的元素,比如设置了contenteditable属性的p元素
2 .这个匹配到的东西和上一个正好相反

31 .required:任意设置了required属性的input,select,textarea元素.这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用

1 .:optional伪类选中"可选的"表单字段,除了加了disabled属性的列表都会被选到

32 .root:匹配文档树的根节点,对于html来说,root表示html元素.除了优先级更高之外,和html{}选择器相同

1 .这个可以用来声明全局css变量.但是这里一般都是less管理的.不用写在这里吧

33 .:scope.作为选择器要匹配的参考点的元素.

1 .在样式表中使用,:scope等效于:root.

34 .:target.表示一个唯一的页面元素,其id与当前URL片段匹配

1 .url地址:http://www.example.com/index.html#section2
2 .会选到的元素
<section id="section2">Example</section>
3 .这个感觉仅仅是分享链接,新页面打开的时候focus的时候有点用

35 .target-within:没有任何浏览器支持

36 .user-invalid:表示任何经过验证的表单元素,其值根据.这个兼容性也是爆炸.就是说这种兼容性差的css属性,根本没有非要扣这些,用库实现类似的效果非常保险

37 .valid:表示input内容验证正确,和invalid效果正好相反.

38 .where: 接受选择器列表作为他的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素.兼容性爆炸,只有ie不支持

支持程度不好的伪类:其实这些特殊的状态,不兼容的情况,关键都是需要js来触发的,所以状态可以保存在state,自己主动设置,而css这里的操作是捕获.

1 .blank:选中所有为空的输入框,input和textarea
2 .current:一个时间维度的伪类，表示当前正在显示的元素或元素的祖先.比如字幕相关.但是字幕一般都是js实现
3 .dir:匹配特定文字书写方向的元素.会匹配到继承的元素.如果一个元素是auto,也是可以匹配到.:dir()会匹配经过客户端计算后的属性, 不管是继承的dir值还是dir值为auto的.但是[dir=ltr]不会,仅仅会匹配到有的
4 .fullscreen:全屏的时候操作.
5 .future:是一个时间维度的伪类，它将匹配完全出现在匹配元素之后的任何元素
6 .focus-visible:当元素匹配:focus伪类并且客户端(UA)的启发式引擎决定焦点应当可见(在这种情况下很多浏览器默认显示“焦点框”。)时，**:focus-visible **伪类将生效.这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。

image.png
//这个按钮现在匹配的就是focus-visible.默认鼠标点击是没有focus样式的

1 .在一个input或者其他元素被focus,鼠标和键盘触发是不同的
2 .在input里面,键盘focus会选中里面全部内容,鼠标的话,仅仅会有个

7 .has:没有任何浏览器支持
8 .host-content():从来没见过
9 .is:函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素

//以下两种写法等价
:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* 以上内容相当于以下内容 */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

10 .local-link.指向同一文档的链接。因此，作为超链接的源锚的元素，其目标的绝对 URL 与元素自己的文档 URL 匹配

nth-这种集合

1 .nth-child:选中所有兄弟元素,然后在括号里面进行筛选.有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合

1 .nth-child(2n+1)=nth-child(odd):选中所有奇数
2 .nth-child(2n)=nth-child(even):选中所有偶数
3 .nth-child(1):选中第一个.和first-child一样==nth-child(0n+1)
4 .nth-child(-n+3):选中前三个元素.n+3除了前两个,后面都选

2 .nth-last-child:和上面那个效果一样,但是找的时候是从后往前.所以nth-last-child(-n+3):后面三个

3 .nth-last-of-type:和nth-of-type一样:只是它从结尾处反序计数，而不是从开头
4 .nth-of-type:具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置,语法参数和nth-child一样.这种怎么感觉都差不多呢
5 .nth-col:专门用来做表格的选取