:active
匹配被用户激活的元素
/* Selects any <a> that is being activated */
a:active {
color: red;
}
:any-link
作为超链接源锚点的元素,无论是否已被访问
<a href="https://example.com">外部链接</a><br />
<a href="#">内部目标链接</a><br />
<a>占位符链接(不会有样式)</a>
a:any-link {
border: 1px solid blue;
color: orange;
}
/* WebKit 浏览器 */
a:-webkit-any-link {
border: 1px solid blue;
color: orange;
}
:autofill
在浏览器自动填充表单中的<input>
元素的值时匹配该 input 元素
<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>
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")
/* 匹配任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项) */
:checked {
margin-left: 25px;
border: 1px solid blue;
}
:default
一组相关元素中的默认表单元素
/* Selects any default <input> */
input:default {
background-color: lime;
}
:defined
表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素
/* 选择所有已定义的元素 */
:defined {
font-style: italic;
}
/* 选择指定自定义元素的任何实例 */
simple-custom:defined {
display: block;
}
:disabled
表示任何被禁用的元素
<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>
label {
display: block;
margin-top: 1em;
}
*:disabled {
background-color: dimgrey;
color: linen;
opacity: 1;
}
:empty
不包含任何子元素的元素
<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>
div:empty {
outline: 2px solid deeppink;
height: 1em;
}
:enabled
表示任何已启用的元素。如果元素可以被激活(例如被选择、单击、输入文本等),或者能够获得焦点,那么它就是启用的
<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>
label {
display: block;
margin-top: 1em;
}
*:enabled {
background-color: gold;
}
:first-child
表示在一组兄弟元素中的第一个元素
<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>
p {
font-weight: bold;
}
li:first-child {
border: 2px solid orange;
}
:first-of-type
表示一组兄弟元素中其类型的第一个元素
<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>
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:first-of-type {
border: 2px solid orange;
}
:focus
表示获得焦点的元素(如表单输入)
<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>
label {
display: block;
margin-top: 1em;
}
input:focus {
background-color: lightblue;
}
select:focus {
background-color: ivory;
}
:focus-visible
当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时,:focus-visible 伪类将生效
<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>
input,
button {
margin: 10px;
}
.focus-only:focus {
outline: 2px solid black;
}
.focus-visible-only:focus-visible {
outline: 4px dashed darkorange;
}
:focus-within
表示当元素或其任意后代元素被聚焦时,将匹配该元素
<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>
label {
display: block;
margin-top: 1em;
}
label:focus-within {
font-weight: bold;
}
:fullscreen
当前处于全屏模式的所有元素
<h1>MDN Web 文档演示::fullscreen 伪类</h1>
<p>
此演示使用 <code>:fullscreen</code> 伪类完全使用 CSS
来实现自动更改用于开启和关闭全屏模式的按钮的样式。
</p>
<button id="fs-toggle">切换全屏</button>
#fs-toggle:not(:fullscreen) {
background-color: #afa;
}
:has()
表示一个元素,如果作为参数传递的任何相对选择器在锚定到该元素时,至少匹配一个元素
<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>
h1,
h2 {
margin: 0 0 1rem 0;
}
h1:has(+ h2) {
margin: 0 0 0.25rem 0;
}
:host
选择内部使用了该 CSS 的影子 DOM(shadow DOM) 的影子宿主
<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 层次结构中的位置匹配
<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 中选择包括它的自定义元素)——但前提是该函数的参数与选择的阴影宿主相匹配。
<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
在用户使用指针设备与元素进行交互时匹配,但不一定激活它
<p>Would you like to join our quest?</p>
<button class="joinBtn">Confirm</button>
.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 限定的范围之内。
<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>
label {
display: block;
margin-top: 1em;
}
input:in-range {
background-color: palegreen;
}
:indeterminate
表示任意的状态不确定的表单元素,例如那些将 HTML indeterminate 属性设置为 true 的复选框,以及属于某个组且该组中所有单选按钮都未选中的单选按钮,还有不确定状态的 <progress>
元素
<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>
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>
或其他表单元素
<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>
label {
display: block;
margin-top: 1em;
}
input:invalid {
background-color: ivory;
border: none;
outline: 2px solid red;
border-radius: 5px;
}
:is()
:is() CSS 伪类函数以选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
<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>
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 伪类基于元素语言来匹配页面元素
<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>
*:lang(en-US) {
outline: 2px solid deeppink;
}
:last-child
:last-child CSS 伪类代表一组兄弟元素中的最后元素。
<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>
p {
font-weight: bold;
}
li:last-child {
border: 2px solid orange;
}
:last-of-type
表示了在(它父元素的)子元素列表中,最后一个给定类型的元素
<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>
p em:last-of-type {
color: lime;
}
:left
需要和@规则 @page 配套使用,对打印文档的左侧页设置 CSS 样式
/* 设置打印时的左侧文档样式 */
@page :left {
margin: 2in 3in;
}
:link
表示尚未被访问的元素,匹配每个具有 href 属性的未访问的 <a>
或 <area>
元素
<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>
p {
font-weight: bold;
}
a:link {
color: forestgreen;
text-decoration-color: hotpink;
}
:not()
用来匹配不符合一组选择器的元素
<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>
p:not(.irrelevant) {
font-weight: bold;
}
p > strong,
p > b.important {
color: crimson;
}
p > :not(strong, b.important) {
color: darkmagenta;
}
:nth-child()
根据元素在父元素的子元素列表中的索引来选择元素
<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>
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
从兄弟节点中从后往前匹配处于某些位置的元素
<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>
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
基于元素在相同类型(标签名)的兄弟元素中相对最后一个元素的位置来匹配元素
<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>
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:nth-last-of-type(3n) {
border: 2px solid orange;
}
:nth-of-type
基于相同类型(标签名称)的兄弟元素中的位置来匹配元素
<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>
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:nth-of-type(even) {
border: 2px solid orange;
}
:only-child
表示没有任何兄弟元素的元素
<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>
li:only-child {
color: fuchsia;
}
b:only-child {
text-decoration: underline;
}
:only-of-type
代表了任意一个元素,这个元素没有其他相同类型的兄弟元素
<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>
a:only-of-type {
color: fuchsia;
}
dd:only-of-type {
background-color: bisque;
}
:optional
表示任何未设置 required 属性的 <input>
、<select>
或 <textarea>
元素
<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>
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:optional {
background-color: palegreen;
}
:out-of-range
表示一个 <input>
元素,其当前值处于属性 min 和 max 限定的范围外
<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>
label {
display: block;
margin-top: 1em;
}
input:out-of-range {
background-color: orangered;
}
:past
一个时间维度的伪类,它将匹配任何完全出现在匹配元素之前的元素
<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>
:past(p, span) {
display: none;
}
:paused
表示一个处于“暂停”状态(即非“播放”状态)的可播放的元素,如 <audio>
或 <video>
:paused {
border: 5px solid orange;
}
:picture-in-picture
匹配当前处于画中画模式的元素
<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>
:picture-in-picture {
box-shadow: 0 0 0 5px red;
}
:placeholder-shown
表示当前显示占位符文本的任何 <input>
或 <textarea>
元素
<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>
label {
display: block;
margin-top: 1em;
}
input:placeholder-shown {
background-color: ivory;
border: 2px solid darkorange;
border-radius: 5px;
}
:playing
表示一个处于“播放”状态的可播放元素,例如 <audio>
或 <video>
:playing {
border: 5px solid green;
}
:popover-open
表示处于显示状态的弹出框元素
[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;
}
:popover-open {
width: 200px;
height: 100px;
position: absolute;
inset: unset;
bottom: 5px;
right: 5px;
margin: 0;
}
: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 {
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 元素)可以被用户编辑
<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-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>
元素
<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>
label {
display: block;
margin-top: 1em;
}
.req {
color: red;
}
*:required {
background-color: gold;
}
:right
:right CSS 伪类必须与@规则 @page 一起配套使用,表示打印文档的所有右页
@page :right {
margin: 2in 3in;
}
:root
匹配文档树的根元素
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:scope
表示作为选择器要匹配的作为参考点或作用域的元素
/* 选择一个限制作用域的元素 */
:scope {
background-color: lime;
}
:seeking
表示一个可播放的元素,比如 <audio>
或 <video>
,当可播放元素正在媒体资源中寻找播放位置时
:seeking {
outline: 5px solid red;
}
video:seeking {
outline: 5px solid blue;
}
:stalled
表示在播放停滞时可播放的元素
:stalled {
outline: 5px solid red;
}
audio:stalled {
background-color: red;
}
:state()
匹配具有指定自定义状态的自定义元素
labeled-checkbox {
border: dashed red;
}
labeled-checkbox:state(checked) {
border: solid;
}
:target
表示一个唯一的元素(目标元素),其 id 与当前 URL 片段匹配
<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>
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
表示一个元素是目标元素,或者包含一个目标元素
<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>
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
表示任何经过验证的表单元素,在用户与该元素交互后,其值根据验证约束无效
<form>
<label for="email">Email *: </label>
<input id="email" name="email" type="email" required />
<span></span>
</form>
input:user-invalid {
border: 2px solid red;
}
input:user-invalid + span::before {
content: "✖";
color: red;
}
:user-valid
表示任何经过验证的表单元素,其值根据其验证约束正确验证
<form>
<label for="email">Email *: </label>
<input
id="email"
name="email"
type="email"
value="test@example.com"
required />
<span></span>
</form>
input:user-valid {
border: 2px solid green;
}
input:user-valid + span::before {
content: "✓";
color: green;
}
:valid
表示内容验证正确的<input>
或其他 <form>
元素
/* Selects any valid <input> */
input:valid {
background-color: powderblue;
}
:visited
在用户访问链接后生效,出于隐私保护的原因,使用该选择器可以修改的样式非常有限
<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>
p {
font-weight: bold;
}
a:visited {
color: forestgreen;
text-decoration-color: hotpink;
}
:volume-locked
表示能够发出声音,但其音量目前被用户“锁定”的媒体元素,如 <audio>
或 <video>
:volume-locked {
border: 5px solid green;
}
video:volume-locked {
border: 5px solid aqua;
}
:where()
接受选择器列表作为它的参数,将会选择所有能被该选择器列表中任何一条规则选中的元素
/* 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;
}