三水

`:active`

匹配被用户激活的元素

css

/* Selects any <a> that is being activated */
a:active {
  color: red;
}

`:any-link`

作为超链接源锚点的元素，无论是否已被访问

HTMLCSS

HTML

<a href="https://example.com">外部链接</a><br />
<a href="#">内部目标链接</a><br />
<a>占位符链接（不会有样式）</a>

CSS

a:any-link {
  border: 1px solid blue;
  color: orange;
}

/* WebKit 浏览器 */
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}

`:autofill`

在浏览器自动填充表单中的<input>元素的值时匹配该 input 元素

HTMLCSS

HTML

<form>
  <p>Click on the text box and choose any option suggested by your browser.</p>

  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name" />

  <label for="email">Email Address</label>
  <input id="email" name="email" type="email" autocomplete="email" />

  <label for="country">Country</label>
  <input id="country" name="country" type="text" autocomplete="country-name" />
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

input:autofill {
  border: 3px solid darkorange;
}

input:-webkit-autofill {
  border: 3px solid darkorange;
}

`:checked`

任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或 ("select") 元素中的option HTML 元素 ("option")

HTMLCSS

HTML

CSS

/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

`:default`

一组相关元素中的默认表单元素

HTMLCSS

HTML

CSS

/* Selects any default <input> */
input:default {
  background-color: lime;
}

`:defined`

表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素

CSS

/* 选择所有已定义的元素 */
:defined {
  font-style: italic;
}

/* 选择指定自定义元素的任何实例 */
simple-custom:defined {
  display: block;
}

`:disabled`

表示任何被禁用的元素

HTMLCSS

HTML

<form>
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" />

  <label for="emp">Employed:</label>
  <select id="emp" name="emp" disabled>
    <option>No</option>
    <option>Yes</option>
  </select>

  <label for="empDate">Employment Date:</label>
  <input id="empDate" name="empDate" type="date" disabled />

  <label for="resume">Resume:</label>
  <input id="resume" name="resume" type="file" />
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

*:disabled {
  background-color: dimgrey;
  color: linen;
  opacity: 1;
}

`:empty`

不包含任何子元素的元素

HTMLCSS

HTML

<p>Element with no content:</p>
<div></div>

<p>Element with comment:</p>
<div><!-- Simple Comment --></div>

<p>Element with nested empty element:</p>
<div><p></p></div>

CSS

div:empty {
  outline: 2px solid deeppink;
  height: 1em;
}

`:enabled`

表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的

HTMLCSS

HTML

<form>
  <label for="name">Name:</label>
  <input id="name" name="name" type="text" />

  <label for="emp">Employed:</label>
  <select id="emp" name="emp" disabled>
    <option>No</option>
    <option>Yes</option>
  </select>

  <label for="empDate">Employment Date:</label>
  <input id="empDate" name="empDate" type="date" disabled />

  <label for="resume">Resume:</label>
  <input id="resume" name="resume" type="file" />
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

*:enabled {
  background-color: gold;
}

`:first-child`

表示在一组兄弟元素中的第一个元素

HTMLCSS

HTML

<p>Track & field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

CSS

p {
  font-weight: bold;
}

li:first-child {
  border: 2px solid orange;
}

`:first-of-type`

表示一组兄弟元素中其类型的第一个元素

HTMLCSS

HTML

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

CSS

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:first-of-type {
  border: 2px solid orange;
}

`:focus`

表示获得焦点的元素（如表单输入）

HTMLCSS

HTML

<form>
  <p>Which flavor would you like to order?</p>
  <label>Full Name: <input name="firstName" type="text" /></label>
  <label
    >Flavor:
    <select name="flavor">
      <option>Cherry</option>
      <option>Green Tea</option>
      <option>Moose Tracks</option>
      <option>Mint Chip</option>
    </select>
  </label>
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

input:focus {
  background-color: lightblue;
}

select:focus {
  background-color: ivory;
}

`:focus-visible`

当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，:focus-visible 伪类将生效

HTMLCSS

HTML

<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>

CSS

input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

`:focus-within`

表示当元素或其任意后代元素被聚焦时，将匹配该元素

HTMLCSS

HTML

<form>
  <p>Which flavor would you like to order?</p>
  <label>Full Name: <input name="firstName" type="text" /></label>
  <label
    >Flavor:
    <select name="flavor">
      <option>Cherry</option>
      <option>Green Tea</option>
      <option>Moose Tracks</option>
      <option>Mint Chip</option>
    </select>
  </label>
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

label:focus-within {
  font-weight: bold;
}

`:fullscreen`

当前处于全屏模式的所有元素

HTMLCSS

HTML

<h1>MDN Web 文档演示：:fullscreen 伪类</h1>

<p>
  此演示使用 <code>:fullscreen</code> 伪类完全使用 CSS
  来实现自动更改用于开启和关闭全屏模式的按钮的样式。
</p>

<button id="fs-toggle">切换全屏</button>

CSS

#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

`:has()`

表示一个元素，如果作为参数传递的任何相对选择器在锚定到该元素时，至少匹配一个元素

HTMLCSS

HTML

<section>
  <article>
    <h1>Morning Times</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>

CSS

h1,
h2 {
  margin: 0 0 1rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}

`:host`

选择内部使用了该 CSS 的影子 DOM（shadow DOM）的影子宿主

HTMLJS

HTML

<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

`:host-context()`

函数选择内部使用了该 CSS 的影子 DOM（shadow DOM）的影子宿主（shadow host），因此你可以从其影子 DOM 内部选择自定义元素——但前提是作为函数参数的选择器与影子宿主的祖先在 DOM 层次结构中的位置匹配

HTMLJS

HTML

<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

const style = document.createElement("style");
const span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

`:host()`

择包含使用这段 CSS 的 Shadow DOM 的影子宿主（这样就可以从 Shadow DOM 中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。

HTMLJS

HTML

<h1>
  Host selectors <a href="#"><context-span>example</context-span></a>
</h1>

let style = document.createElement("style");
let span = document.createElement("span");
span.textContent = this.textContent;

const shadowRoot = this.attachShadow({ mode: "open" });
shadowRoot.appendChild(style);
shadowRoot.appendChild(span);

style.textContent =
  "span:hover { text-decoration: underline; }" +
  ":host-context(h1) { font-style: italic; }" +
  ':host-context(h1):after { content: " - no links in headers!" }' +
  ":host-context(article, aside) { color: gray; }" +
  ":host(.footer) { color : red; }" +
  ":host { background: rgba(0,0,0,0.1); padding: 2px 5px; }";

`:hover`

在用户使用指针设备与元素进行交互时匹配，但不一定激活它

HTMLCSS

HTML

<p>Would you like to join our quest?</p>
<button class="joinBtn">Confirm</button>

CSS

.joinBtn {
  width: 10em;
  height: 5ex;
  background-color: gold;
  border: 2px solid firebrick;
  border-radius: 10px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}

.joinBtn:hover {
  background-color: bisque;
}

`:in-range`

代表一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围之内。

HTMLCSS

HTML

<form>
  <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />

  <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
  <input id="dep" name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />

  <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

input:in-range {
  background-color: palegreen;
}

`:indeterminate`

表示任意的状态不确定的表单元素，例如那些将 HTML indeterminate 属性设置为 true 的复选框，以及属于某个组且该组中所有单选按钮都未选中的单选按钮，还有不确定状态的 <progress> 元素

HTMLCSSjs

HTML

<fieldset>
  <legend>Checkbox</legend>
  <div>
    <input type="checkbox" id="checkbox" />
    <label for="checkbox">This checkbox label starts out lime.</label>
  </div>
</fieldset>

<fieldset>
  <legend>Radio</legend>
  <div>
    <input type="radio" id="radio1" name="radioButton" value="val1" />
    <label for="radio1">First radio label starts out lime.</label>
  </div>
  <div>
    <input type="radio" id="radio2" name="radioButton" value="val2" />
    <label for="radio2">Second radio label also starts out lime.</label>
  </div>
</fieldset>

CSS

input:indeterminate + label {
  background: lime;
}

const inputs = document.getElementsByTagName("input");

for (let i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}

`:invalid`

用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素

HTMLCSS

HTML

<form>
  <label for="email">Email Address:</label>
  <input id="email" name="email" type="email" value="na@me@example.com" />

  <label for="secret">Secret Code: (lower case letters)</label>
  <input id="secret" name="secret" type="text" value="test" pattern="[a-z]+" />

  <label for="age">Your age: (18+)</label>
  <input id="age" name="age" type="number" value="5" min="18" />

  <label><input name="tos" type="checkbox" required checked /> - Do you agree to ToS?</label>
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

input:invalid {
  background-color: ivory;
  border: none;
  outline: 2px solid red;
  border-radius: 5px;
}

`:is()`

:is() CSS 伪类函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

HTMLCSS

HTML

<ol>
  <li>Saturn</li>
  <li>
    <ul>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ul>
  </li>
  <li>Uranus</li>
  <li>
    <ol>
      <li>Titania</li>
      <li>Oberon</li>
    </ol>
  </li>
</ol>

CSS

ol {
  list-style-type: upper-alpha;
  color: darkblue;
}

/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
:is(ol, ul, menu:unsupported) :is(ol, ul) {
  color: green;
}

:is(ol, ul) :is(ol, ul) ol {
  list-style-type: lower-greek;
  color: chocolate;
}

`:lang()`

:lang() CSS 伪类基于元素语言来匹配页面元素

HTMLCSS

HTML

<p lang="en-US">
  Music during road trips and long commutes aren’t a problem, but using headphones isn’t the best thing to do while
  driving in your car.
</p>

<p lang="pl-PL">
  Gdy widzimy znak z narysowaną czaszką i napisem <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić do środka.
</p>

CSS

*:lang(en-US) {
  outline: 2px solid deeppink;
}

`:last-child`

:last-child CSS 伪类代表一组兄弟元素中的最后元素。

HTMLCSS

HTML

<p>Track & field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

CSS

p {
  font-weight: bold;
}

li:last-child {
  border: 2px solid orange;
}

`:last-of-type`

表示了在（它父元素的）子元素列表中，最后一个给定类型的元素

HTMLCSS

HTML

<p>
  <em>我没有颜色 :(</em><br />
  <strong>我没有颜色 :(</strong><br />
  <em>我有颜色 :D</em><br />
  <strong>我也没有颜色 :(</strong><br />
</p>

<p>
  <em>我没有颜色 :(</em><br />
  <span><em>我有颜色！</em></span
  ><br />
  <strong>我没有颜色 :(</strong><br />
  <em>我有颜色 :D</em><br />
  <span>
    <em>我在子元素里，但没有颜色！</em><br />
    <span style="text-decoration:line-through;"> 我没有颜色 </span><br />
    <em>我却有颜色！</em><br /> </span
  ><br />
  <strong>我也没有颜色 :(</strong>
</p>

CSS

p em:last-of-type {
  color: lime;
}

`:left`

需要和@规则 @page 配套使用，对打印文档的左侧页设置 CSS 样式

CSS

/* 设置打印时的左侧文档样式 */
@page :left {
  margin: 2in 3in;
}

`:link`

表示尚未被访问的元素，匹配每个具有 href 属性的未访问的 <a> 或 <area> 元素

HTMLCSS

HTML

<p>Pages that you might have visited:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org">MDN Web Docs</a>
  </li>
  <li>
    <a href="https://www.youtube.com/">YouTube</a>
  </li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org/missing-2">Random MDN page</a>
  </li>
  <li>
    <a href="https://example.com/missing-2">Random Example page</a>
  </li>
</ul>

CSS

p {
  font-weight: bold;
}

a:link {
  color: forestgreen;
  text-decoration-color: hotpink;
}

`:not()`

用来匹配不符合一组选择器的元素

HTMLCSS

HTML

<p>
  <b>Mars</b> is one of the most Earth-like planets. <b>Mars</b> day is almost the same as an Earth day, only
  <strong>37 minutes</strong> longer.
</p>

<p class="irrelevant">
  <b class="important">NASA</b>'s Jet <del>Momentum</del> Propulsion Laboratory is designing mission concepts to survive
  the <b>Venus</b> extreme temperatures and atmospheric pressure.
</p>

CSS

p:not(.irrelevant) {
  font-weight: bold;
}

p > strong,
p > b.important {
  color: crimson;
}

p > :not(strong, b.important) {
  color: darkmagenta;
}

`:nth-child()`

根据元素在父元素的子元素列表中的索引来选择元素

HTMLCSS

HTML

<p>Track & field champions:</p>
<ul>
  <li>Adhemar da Silva</li>
  <li>Wang Junxia</li>
  <li>Wilma Rudolph</li>
  <li>Babe Didrikson-Zaharias</li>
  <li>Betty Cuthbert</li>
  <li>Fanny Blankers-Koen</li>
  <li>Florence Griffith-Joyner</li>
  <li>Irena Szewinska</li>
  <li>Jackie Joyner-Kersee</li>
  <li>Shirley Strickland</li>
  <li>Carl Lewis</li>
  <li>Emil Zatopek</li>
  <li>Haile Gebrselassie</li>
  <li>Jesse Owens</li>
  <li>Jim Thorpe</li>
  <li>Paavo Nurmi</li>
  <li>Sergei Bubka</li>
  <li>Usain Bolt</li>
</ul>

CSS

p {
  font-weight: bold;
}

li:nth-child(-n + 3) {
  border: 2px solid orange;
  margin-bottom: 1px;
}

li:nth-child(even) {
  background-color: lightyellow;
}

`:nth-last-child`

从兄弟节点中从后往前匹配处于某些位置的元素

HTMLCSS

HTML

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}

`:nth-last-of-type`

基于元素在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素

HTMLCSS

HTML

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

CSS

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:nth-last-of-type(3n) {
  border: 2px solid orange;
}

`:nth-of-type`

基于相同类型（标签名称）的兄弟元素中的位置来匹配元素

HTMLCSS

HTML

<dl>
  <dt>Vegetables:</dt>
  <dd>1. Tomatoes</dd>
  <dd>2. Cucumbers</dd>
  <dd>3. Mushrooms</dd>
  <dt>Fruits:</dt>
  <dd>4. Apples</dd>
  <dd>5. Mangos</dd>
  <dd>6. Pears</dd>
  <dd>7. Oranges</dd>
</dl>

CSS

dt {
  font-weight: bold;
}

dd {
  margin: 3px;
}

dd:nth-of-type(even) {
  border: 2px solid orange;
}

`:only-child`

表示没有任何兄弟元素的元素

HTMLCSS

HTML

<p>Stars expected to attend:</p>
<ol>
  <li>Robert Downey, Jr.</li>
</ol>

<p>Stars yet to confirm:</p>
<ol>
  <li>Scarlett Johansson</li>
  <li>Samuel L. Jackson</li>
  <li>Chris Pratt</li>
</ol>

<p>The ceremony is going to be held in <b>The Dolby Theatre</b>.</p>

CSS

li:only-child {
  color: fuchsia;
}

b:only-child {
  text-decoration: underline;
}

`:only-of-type`

代表了任意一个元素，这个元素没有其他相同类型的兄弟元素

HTMLCSS

HTML

<p>To find out more about <b>QUIC</b>, check <a href="#">RFC 9000</a> and <a href="#">RFC 9114</a>.</p>

<dl>
  <dt>Published</dt>
  <dd>2021</dd>
  <dd>2022</dd>
</dl>

<p>Details about <b>QPACK</b> can be found in <a href="#">RFC 9204</a>.</p>

<dl>
  <dt>Published</dt>
  <dd>2022</dd>
</dl>

CSS

a:only-of-type {
  color: fuchsia;
}

dd:only-of-type {
  background-color: bisque;
}

`:optional`

表示任何未设置 required 属性的 <input>、<select> 或 <textarea> 元素

HTMLCSS

HTML

<form>
  <label for="name">Name: <span class="req">*</span></label>
  <input id="name" name="name" type="text" required />

  <label for="birth">Date of Birth:</label>
  <input id="birth" name="birth" type="date" />

  <label for="origin">How did you find out about us? <span class="req">*</span></label>
  <select id="origin" name="origin" required>
    <option>Google</option>
    <option>Facebook</option>
    <option>Advertisement</option>
  </select>
  <p><span class="req">*</span> - Required field</p>
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

.req {
  color: red;
}

*:optional {
  background-color: palegreen;
}

`:out-of-range`

表示一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围外

HTMLCSS

HTML

<form>
  <label for="amount">How many tickets? (You can buy 2-6 tickets)</label>
  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />

  <label for="dep">Departure Date: (Whole year 2022 is acceptable)</label>
  <input id="dep" name="dep" type="date" min="2022-01-01" max="2022-12-31" value="2025-05-05" />

  <label for="ret">Return Date: (Whole year 2022 is acceptable)</label>
  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

input:out-of-range {
  background-color: orangered;
}

`:past`

一个时间维度的伪类，它将匹配任何完全出现在匹配元素之前的元素

HTMLCSS

HTML

<video controls preload="metadata">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="subtitles.vtt"
    default />
</video>

CSS

:past(p, span) {
  display: none;
}

`:paused`

表示一个处于“暂停”状态（即非“播放”状态）的可播放的元素，如 <audio> 或 <video>

CSS

:paused {
  border: 5px solid orange;
}

`:picture-in-picture`

匹配当前处于画中画模式的元素

HTMLCSS

HTML

<h1>MDN Web Docs Demo: :picture-in-picture pseudo-class</h1>

<p>
  This demo uses the <code>:picture-in-picture</code> pseudo-class to
  automatically change the style of a video entirely using CSS.
</p>

<video id="pip-video"></video>

CSS

:picture-in-picture {
  box-shadow: 0 0 0 5px red;
}

`:placeholder-shown`

表示当前显示占位符文本的任何 <input> 或 <textarea> 元素

HTMLCSS

HTML

<form>
  <label for="name">Full Name:</label>
  <input id="name" name="name" type="text" />

  <label for="email">Email Address:</label>
  <input id="email" name="email" type="email" placeholder="name@example.com" />

  <label for="age">Your age:</label>
  <input id="age" name="age" type="number" value="18" placeholder="You must be 18+" />
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

input:placeholder-shown {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

`:playing`

表示一个处于“播放”状态的可播放元素，例如 <audio> 或 <video>

CSS

:playing {
  border: 5px solid green;
}

`:popover-open`

表示处于显示状态的弹出框元素

默认样式CSS

CSS

[popover] {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 0.25em;
  overflow: auto;
  color: CanvasText;
  background-color: Canvas;
}

CSS

:popover-open {
  width: 200px;
  height: 100px;
  position: absolute;
  inset: unset;
  bottom: 5px;
  right: 5px;
  margin: 0;
}

`:read-only`

表示元素不可被用户编辑的状态

HTMLCSS

HTML

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

CSS

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`

代表一个元素（例如可输入文本的 input 元素）可以被用户编辑

HTMLCSS

HTML

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

CSS

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

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

`:required`

表示任何设置了 required 属性的 <input>、<select> 或 <textarea> 元素

HTMLCSS

HTML

<form>
  <label for="name">Name: <span class="req">*</span></label>
  <input id="name" name="name" type="text" required />

  <label for="birth">Date of Birth:</label>
  <input id="birth" name="birth" type="date" />

  <label for="origin">How did you find out about us? <span class="req">*</span></label>
  <select id="origin" name="origin" required>
    <option>Google</option>
    <option>Facebook</option>
    <option>Advertisement</option>
  </select>
  <p><span class="req">*</span> - Required field</p>
</form>

CSS

label {
  display: block;
  margin-top: 1em;
}

.req {
  color: red;
}

*:required {
  background-color: gold;
}

`:right`

:right CSS 伪类必须与@规则 @page 一起配套使用，表示打印文档的所有右页

CSS

@page :right {
  margin: 2in 3in;
}

`:root`

匹配文档树的根元素

CSS

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

`:scope`

表示作为选择器要匹配的作为参考点或作用域的元素

CSS

/* 选择一个限制作用域的元素 */
:scope {
  background-color: lime;
}

`:seeking`

表示一个可播放的元素，比如 <audio> 或 <video>，当可播放元素正在媒体资源中寻找播放位置时

CSS

:seeking {
  outline: 5px solid red;
}

video:seeking {
  outline: 5px solid blue;
}

`:stalled`

表示在播放停滞时可播放的元素

CSS

:stalled {
  outline: 5px solid red;
}

audio:stalled {
  background-color: red;
}

`:state()`

匹配具有指定自定义状态的自定义元素

CSS

labeled-checkbox {
  border: dashed red;
}
labeled-checkbox:state(checked) {
  border: solid;
}

`:target`

表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配

HTMLCSS

HTML

<h3>目录</h3>
<ol>
  <li><a href="#p1">跳转到第一个段落！</a></li>
  <li><a href="#p2">跳转到第二个段落！</a></li>
  <li><a href="#nowhere">此链接不会跳转，因为目标不存在。</a></li>
</ol>

<h3>我的趣味文章</h3>
<p id="p1">你可以使用 URL 片段定位此<i>段落</i>。点击上面的链接试试吧！</p>
<p id="p2">这是<i>另一个段落</i>，也可以从上面的链接访问。这不是很愉快吗？</p>

CSS

p:target {
  background-color: gold;
}

/* 在目标元素中增加一个伪元素*/
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/*在目标元素中使用 italic 样式*/
p:target i {
  color: red;
}

`:target-within`

表示一个元素是目标元素，或者包含一个目标元素

HTMLCSS

HTML

<h3>Table of Contents</h3>
<ol>
  <li><a href="#p1">Jump to the first paragraph!</a></li>
  <li><a href="#p2">Jump to the second paragraph!</a></li>
</ol>

<article>
  <h3>My Fun Article</h3>
  <p id="p1">
    You can target <i>this paragraph</i> using a URL fragment. Click on the link
    above to try out!
  </p>
  <p id="p2">
    This is <i>another paragraph</i>, also accessible from the links above.
    Isn't that delightful?
  </p>
</article>

CSS

article:target-within {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

`:user-invalid`

表示任何经过验证的表单元素，在用户与该元素交互后，其值根据验证约束无效

HTMLCSS

HTML

<form>
  <label for="email">Email *: </label>
  <input id="email" name="email" type="email" required />
  <span></span>
</form>

CSS

input:user-invalid {
  border: 2px solid red;
}

input:user-invalid + span::before {
  content: "✖";
  color: red;
}

`:user-valid`

表示任何经过验证的表单元素，其值根据其验证约束正确验证

HTMLCSS

HTML

<form>
  <label for="email">Email *: </label>
  <input
    id="email"
    name="email"
    type="email"
    value="test@example.com"
    required />
  <span></span>
</form>

CSS

input:user-valid {
  border: 2px solid green;
}

input:user-valid + span::before {
  content: "✓";
  color: green;
}

`:valid`

表示内容验证正确的<input> 或其他 <form> 元素

CSS

/* Selects any valid <input> */
input:valid {
  background-color: powderblue;
}

`:visited`

在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限

HTMLCSS

HTML

<p>Pages that you might have visited:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org">MDN Web Docs</a>
  </li>
  <li>
    <a href="https://www.youtube.com/">YouTube</a>
  </li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
  <li>
    <a href="https://developer.mozilla.org/missing-1">Random MDN page</a>
  </li>
  <li>
    <a href="https://example.com/missing-1">Random Example page</a>
  </li>
</ul>

CSS

p {
  font-weight: bold;
}

a:visited {
  color: forestgreen;
  text-decoration-color: hotpink;
}

`:volume-locked`

表示能够发出声音，但其音量目前被用户“锁定”的媒体元素，如 <audio> 或 <video>

CSS

:volume-locked {
  border: 5px solid green;
}

video:volume-locked {
  border: 5px solid aqua;
}

`:where()`

接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素

CSS

/* Selects any paragraph inside a header, main
   or footer element that is being hovered */
:where(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

/* The above is equivalent to the following */
header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

:active ​

:any-link ​

:autofill ​

:checked ​

:default ​

:defined ​

:disabled ​

:empty ​

:enabled ​

:first-child ​

:first-of-type ​

:focus ​

:focus-visible ​

:focus-within ​

:fullscreen ​

:has() ​

:host ​

:host-context() ​

:host() ​

:hover ​

:in-range ​

:indeterminate ​

:invalid ​

:is() ​

:lang() ​

:last-child ​

:last-of-type ​

:left ​

:link ​

:not() ​

:nth-child() ​

:nth-last-child ​

:nth-last-of-type ​

:nth-of-type ​

:only-child ​

:only-of-type ​

:optional ​

:out-of-range ​

:past ​

:paused ​

:picture-in-picture ​

:placeholder-shown ​

:playing ​

:popover-open ​

:read-only ​

:read-write ​

:required ​

:right ​

:root ​

:scope ​

:seeking ​

:stalled ​

:state() ​

:target ​

:target-within ​

:user-invalid ​

:user-valid ​

:valid ​

:visited ​

:volume-locked ​

:where() ​

`:active`

`:any-link`

`:autofill`

`:checked`

`:default`

`:defined`

`:disabled`

`:empty`

`:enabled`

`:first-child`

`:first-of-type`

`:focus`

`:focus-visible`

`:focus-within`

`:fullscreen`

`:has()`

`:host`

`:host-context()`

`:host()`

`:hover`

`:in-range`

`:indeterminate`

`:invalid`

`:is()`

`:lang()`

`:last-child`

`:last-of-type`

`:left`

`:link`

`:not()`

`:nth-child()`

`:nth-last-child`

`:nth-last-of-type`

`:nth-of-type`

`:only-child`

`:only-of-type`

`:optional`

`:out-of-range`

`:past`

`:paused`

`:picture-in-picture`

`:placeholder-shown`

`:playing`

`:popover-open`

`:read-only`

`:read-write`

`:required`

`:right`

`:root`

`:scope`

`:seeking`

`:stalled`

`:state()`

`:target`

`:target-within`

`:user-invalid`

`:user-valid`

`:valid`

`:visited`

`:volume-locked`

`:where()`