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`.
CSS 选择器 - Pseudo-classes
伪选择器，此选择器不选择网页元素，但却是网页元素的一部分，或者说是网页元素所处于的某一环境、或者某一状态。
Pseudo-classes
伪类是使用 ':' 连接于选择器之后的关键字。
:active
此伪类匹配被用户激活的元素。此伪类会被后声明的(:link, :hover, :visited)覆盖。为了正常加上此伪类样式，应当以 LVHA 顺序添加。:link - :visited - :hover - :active
:checked
此伪类选择器表示任何处于选中状态的 radio checkbox select元素中的option
div,
select {
margin: 8px;
}
/* Labels for checked inputs */
input:checked + label {
color: red;
}
/* Radio element, when checked */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
/* Checkbox element, when checked */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
/* Option elements, when selected */
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}:default
表示一组相关元素中的默认表单元素。可用于
input:default {
box-shadow: 0 0 2px 1px coral;
}
input:default + label {
color: coral;
}:disabled
此伪类表示任何被禁用的元素。
input[type="text"]:disabled {
background: #ccc;
}// Wait for the page to finish loading
document.addEventListener('DOMContentLoaded', function () {
// Attach `change` event listener to checkbox
document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);
function toggleBilling() {
// Select the billing text fields
var billingItems = document.querySelectorAll('#billing input[type="text"]');
// Toggle the billing text fields
for (var i = 0; i < billingItems.length; i++) {
billingItems[i].disabled = !billingItems[i].disabled;
}
}:empty
此伪类代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格)，但注释或处理指令不包含在内。
I will be pink
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}:enabled
此伪类表示任何启用的元素。若一个元素能被激活(如选择、点击、接受输入文本)或获取焦点，那么表示该元素是启用的。
input:enabled {
color: #22AA22;
}
input:disabled {
color: #D9D9D9;
}
:first
此伪类同 @page 指令一同使用。
@page 指令：用以改变文档列印时的一些 CSS 属性。该指令不能修改所有的 CSS 属性，它只能变更：margins, orphans, widows, 文档的分页符，其他的属性改变会被忽略。
First Page.
Second Page.
@page :first {
margin-left: 50%;
margin-top: 50%;
}
p {
page-break-after: always;
}document.querySelector("button").onclick = function () {
window.print();
}: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.
- Item 1
- Item 2
- Item 3
- Item 3.1
- Item 3.2
- Item 3.3
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
ul li {
color: blue;
}
ul li:first-child {
color: red;
font-weight: bold;
}:first-of-type
匹配一组兄弟元素中同类型元素的第一个元素。
article :first-of-type {
background-color: pink;
}
/*
未指明单一类型选择器，会匹配此种类型组中的第一个元素。
*/:fullscreen
匹配处于全屏模式的每一个元素。
MDN Web Docs Demo: :fullscreen pseudo-class
This demo uses the :fullscreen pseudo-class to automatically change the style of a button used to toggle full-screen mode on and off, entirely using CSS.
#fs-toggle:not(:fullscreen) {
background-color: #afa;
}
#fs-toggle:fullscreen {
background-color: #faa;
}:focus
匹配获得焦点的元素。例如：表单中的输入框被点击，或者使用 Tab 键选中。
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}:focus-within
匹配获得焦点的元素，或者该元素所包含的元素获得焦点。指其或其后代获得焦点。
Try typing into this form.
form {
border: 1px solid;
color: gray;
padding: 4px;
}
form:focus-within {
background: #ff8;
color: black;
}
input {
margin: 4px;
}:hover
匹配同光标设备互动的元素。无需进入元素，在元素上划过就会触发匹配。
Try hovering over this link.a {
background-color: powderblue;
transition: background-color .5s;
}
a:hover {
background-color: gold;
}:indeterminate
匹配 Form 表单中处于不确定状态的元素。
此选择器的目标元素是：
的 indeterminate 属性，通过 JavaScript 设置为 true。
Form 表单中此种相同 name 值的元素未被选中的状态。
input:indeterminate+label {
background: lime;
}:in-range
匹配 元素，此元素的值处于其 min & max 属性指定的范围之内。若未指定值的范围，此伪类不会匹配。
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
匹配内容未通过验证的任何 元素或其他