css 伪类伪元素测试页面

css 伪类

:link 默认，未访问
测试 DOM span 测试 DOM a
测试 DOM div
:visited 已访问过
测试 DOM span 测试 DOM a
测试 DOM div
:hover 悬停在上面时触发
测试 DOM span 测试 DOM a
测试 DOM div
:active 按下时触发，抬起时结束
测试 DOM span 测试 DOM a
测试 DOM div
:checked 选中时触发
测试 DOM span 测试 DOM a
测试 DOM div
:default 默认值，其实你可以认为是 [checked]
测试 DOM span 测试 DOM a
测试 DOM div
:defined 所有认识的标签，可以通过CustomElementRegistry.define()来声明。 [v-cloak]差不多一个意思，可以用来做默认隐藏:not(:defined)
测试 DOM span 测试 DOM a
测试 DOM div
:disabled 被禁用时样式
测试 DOM span 测试 DOM a
测试 DOM div
:enabled 启用时的状态
测试 DOM span 测试 DOM a
测试 DOM div
:empty 空元素(没有子元素的元素)时触发
  测试 DOM span 测试 DOM a
测试 DOM div
:first :first @page CSS 伪类选择器 描述的是：打印文档的时候，第一页的样式。
  测试 DOM span 测试 DOM a
测试 DOM div
:left 需要和@规则 @page 配套使用, 对打印文档的左侧页设置CSS样式.
  测试 DOM span 测试 DOM a
测试 DOM div
:right 需要和@规则 @page 配套使用, 对打印文档的左侧页设置CSS样式.这里的“左” 或 “右” 不是固定的，取决与文档的写作方向。如果第一页主要文字方向是从左到右的，那么它就是:right右页，反之它就是:left左页。
  测试 DOM span 测试 DOM a
测试 DOM div
:first-child 在一组兄弟元素中的第一个元素

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

  测试 DOM span 测试 DOM a
测试 DOM div
:last-child 在一组兄弟元素中的最后一个元素

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

  测试 DOM span 测试 DOM a
测试 DOM div
:first-of-type 一组兄弟元素中同类型的第一个元素

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
  测试 DOM span 测试 DOM a
测试 DOM div
:last-of-type 一组兄弟元素中同类型的最后一个元素

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
  测试 DOM span 测试 DOM a
测试 DOM div
:focus 获得焦点的元素(当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。)
  测试 DOM span 测试 DOM a
测试 DOM div
:focus-within 表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。（shadow DOM 树 (en-US)中的后代也包括在内）

试试在这个表单中输入点什么。

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

Host selectors example

  测试 DOM span 测试 DOM a
测试 DOM div
:indeterminate 表示状态不确定的表单元素（ checkbox 的 indeterminate 属性被 JavaScript设置为 true ）（radio 元素, 表单中拥有相同 name值的所有单选按钮都未被选中时。）
  测试 DOM span 测试 DOM a
测试 DOM div
:in-range 一个 input 元素，其当前值处于属性min 和max 限定的范围之内.
  测试 DOM span 测试 DOM a
测试 DOM div
:out-range 一个 input 元素，其当前值处于属性min 和max 限定的范围之内.
  测试 DOM span 测试 DOM a
测试 DOM div
:out-of-range 一个 input 元素，其当前值处于属性min 和max 限定的范围之内.
  测试 DOM span 测试 DOM a
测试 DOM div
:invalid 表示任意内容未通过验证的 input 或其他 form 元素 .
  测试 DOM span 测试 DOM a
测试 DOM div
:valid 表示内容验证正确的input 或其他 form 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
  测试 DOM span 测试 DOM a
测试 DOM div
:lang 基于元素语言来匹配页面元素
This English quote has a nested quote inside.
This French quote has a nested quote inside.
This German quote has a nested quote inside.
  测试 DOM span 测试 DOM a
测试 DOM div
:not 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）
					:not() 伪类不能被嵌套，这意味着 :not(:not(...)) 是无效的。
					由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器将不会工作。
					可以利用这个伪类写一个完全没有用处的选择器。例如， :not(*) 匹配任何非元素的元素，因此，这个规则将永远不会被应用。
					可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。
					:not(.foo) 将匹配任何非 .foo 的元素，包括 html 和 body。
					这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素 table 内部的 a 上, 因为 tr将会被 :not(table) 这部分选择器匹配。
  测试 DOM span 测试 DOM a
测试 DOM div
:nth-child :nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。
0n+3 或简单的 3 匹配第三个元素。
1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。
3n+4 匹配位置为 4、7、10、13...的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。

span:nth-child(2n+1), WITHOUT an <em> among the child elements.

Children 1, 3, 5, and 7 are selected.

Span 1! Span 2 Span 3! Span 4 Span 5! Span 6 Span 7!

span:nth-child(2n+1), WITH an <em> among the child elements.

Children 1, 5, and 7 are selected.
3 is used in the counting because it is a child, but it isn't selected because it isn't a <span>.

Span! Span This is an `em`. Span Span! Span Span! Span

span:nth-of-type(2n+1), WITH an <em> among the child elements.

Children 1, 4, 6, and 8 are selected.
3 isn't used in the counting or selected because it is an <em>, not a <span>, and nth-of-type only selects children of that type. The <em> is completely skipped over and ignored.

Span! Span This is an `em`. Span! Span Span! Span Span!
  测试 DOM span 测试 DOM a
测试 DOM div
:nth-last-child 这个伪类和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数.

span:nth-last-child(2n+1), WITHOUT an <em> among the child elements.

Children 1, 3, 5, and 7 are selected.

Span 1! Span 2 Span 3! Span 4 Span 5! Span 6 Span 7!

span:nth-last-child(2n+1), WITH an <em> among the child elements.

Children 1, 5, and 7 are selected.
3 is used in the counting because it is a child, but it isn't selected because it isn't a <span>.

Span! Span This is an `em`. Span Span! Span Span! Span

span:nth-of-type(2n+1), WITH an <em> among the child elements.

Children 1, 4, 6, and 8 are selected.
3 isn't used in the counting or selected because it is an <em>, not a <span>, and nth-of-type only selects children of that type. The <em> is completely skipped over and ignored.

Span! Span This is an `em`. Span! Span Span! Span Span!
  测试 DOM span 测试 DOM a
测试 DOM div
:nth-last-of-type 相同类型兄弟节点元素中同类型的元素，倒序

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
  测试 DOM span 测试 DOM a
测试 DOM div
:nth-of-type 相同类型兄弟节点元素中同类型的元素

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
  测试 DOM span 测试 DOM a
测试 DOM div
:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  测试 DOM span 测试 DOM a
测试 DOM div
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  测试 DOM span 测试 DOM a
测试 DOM div
:optional 没有required属性的 input，select 或 textarea 元素

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  测试 DOM span 测试 DOM a
测试 DOM div
:read-only 表示元素不可被用户编辑的状态(如锁定的文本输入框,也会选择所有的不能被用户编辑的元素。)

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  contenteditable 测试 DOM span 测试 DOM a
测试 DOM div
:read-write 表示元素不可被用户编辑的状态(如 input 文本输入框,会选择所有可以被用户编辑的元素，例如设置了 contenteditable)

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  contenteditable 测试 DOM span 测试 DOM a
测试 DOM div
:required 表示任意设置了required属性的input，select, 或 textarea元素。 这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  contenteditable 测试 DOM span 测试 DOM a
测试 DOM div
:root :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 html 元素，除了优先级更高之外，与 html 选择器相同。

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  contenteditable 测试 DOM span 测试 DOM a
测试 DOM div
:scope 表示作为选择器要匹配的参考点的元素。当前，在样式表中使用时, :scope 等效于 :root，因为目前尚无一种方法来显式建立作用域元素。当从DOM API使用，如（querySelector(), querySelectorAll(), matches(), 或 Element.closest()）, :scope 匹配你调用API的元素。

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  contenteditable 测试 DOM span 测试 DOM a
测试 DOM div
:target 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .

This text is selected!

This text isn't selected.

This text isn't selected: it's not a `p`.

This text isn't selected.

This `div` is first!
This nested `span` is first!
This nested `em` is first, but this nested `em` is last!
This nested `span` gets styled!
This `b` qualifies!
This is the final `div`.
This is a span. This is another span. This is emphasized. Wow, this span gets limed!!! This is struck through. Here is one last span.
I am a lonely only child.
I have siblings.
So do I!
I also have siblings, but this is an only child.
  contenteditable 测试 DOM span 测试 DOM a
测试 DOM div
微信公众号-前端linong