CSS 伪类:default 表示一组相关元素中的默认表单元素，该选择器可以在<button>,<input type=

伪类(Pseudo-classes)

为了正常加上样式，不被其他链接相关的伪类所覆盖，发现了LVHA 顺序

:link — :visited — :hover — :active

body { background-color: #ffffc9 }
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */

:checked 表示任何处于选中状态的radio(单选按钮),checkbox(复选框),或者option(select中的一项)
:default 表示一组相关元素中的默认表单元素，该选择器可以在<button>,<input type="checkbox">,<input type="radio">, 以及<option> 上使用。如：

<input type="radio" name="season" id="spring">
<label for="spring">Spring</label>

<input type="radio" name="season" id="summer" checked>
<label for="summer">Summer</label>

input:default {
  box-shadow: 0 0 2px 1px coral;
}
input:default + label {
  color: coral;
}

:disable 表示任何被禁用的元素。
:enabled 表示任何启用的（enabled）元素。
:empty 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。
:first-child 表示在一组兄弟元素中的第一个元素。
:first-of-type 表示一组兄弟元素中其类型的第一个元素。
:last-child 代表父元素的最后一个子元素。
:last-of-type 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素，也包括子元素的最后一个子元素并以此类推。
:nth-child(an+b)

// 表示奇数行
tr:nth-child(2n+1)
tr:nth-child(odd)
// 表示偶数行
tr:nth-child(2n)
tr:nth-child(even)

匹配前三个子元素中的span元素： span:nth-child(-n+3)

:nth-last-child() 从后往前匹配
:only-child 匹配没有任何兄弟元素的元素.
:focus 表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
:focus-within 表示一个元素获得焦点，或，该元素的后代元素获得焦点。
:placeholder-shown 在 <input> 或<textarea>元素显示 placeholder text 时生效。
:has() 代表一个元素，其给定的选择器参数（相对于该元素的 :scope）至少匹配一个元素。如：

/* 下面的选择器只会匹配直接包含 <img> 子元素的 <a> 元素： */
a:has(> img)
/* 下面的选择器只会匹配其后紧跟着 <p> 元素的 <h1> 元素： */
h1:has(+ p)

:not() 用来匹配不符合一组选择器的元素。
:in-range && :out-of-range 代表一个 <input> 元素，其当前值是否处于属性min 和max 限定的范围之内.

<form action="" id="form1">
  <ul>Values between 1 and 10 are valid.
    <li>
      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
      <label for="value1">Your value is </label>
    </li>
  </ul>
</form>

li {
  list-style: none;
  margin-bottom: 1em;
}
input {
  border: 1px solid black;
}
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}
input:in-range + label::after {
  content: 'okay.';
}
input:out-of-range + label::after {
  content: 'out of range!';
}

:invalid 表示任意内容未通过验证的 <input> 或其他 <form> 元素
:valid 表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
:required 任意拥有required属性的 <input> 或 <textarea> 成为必填字段
:optional 表示任意没有required属性的 <input>，<select> 或 <textarea> 元素使用它。

<form>
  <label for="url_input">Enter a URL:</label>
  <input type="url" id="url_input" />
  <label for="email_input">Enter an email address:</label>
  <input type="email" id="email_input" required/>
</form>

input:invalid {
  background-color: #ffdddd;
}
form:invalid {
  border: 5px solid #ffdddd;
}
input:valid {
  background-color: #ddffdd;
}
form:valid {
  border: 5px solid #ddffdd;
}
input:required {
  border-color: #800000;
  border-width: 3px;
}
input:required:invalid {
  border-color: #C00000;
}

:read-only 表示元素不可被用户编辑的状态（如锁定的文本输入框）。

<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 readonly：只读
<element contenteditable="true|false"> 可编辑|不可编辑

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; }

:read-write 为可以被用户编辑元素设置样式。
:lang() 基于元素语言来匹配页面元素。
@page
:first @page 表示打印文档的时候，第一页的样式。
*:left @page 表示打印文档的左侧页设置CSS样式.

CSS 伪类

伪类(Pseudo-classes)

伪元素