伪类选择器用于指定所选元素的特殊状态，参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
伪元素选择器允许你对被选择元素的特定部分修改样式，不会真的修改dom结构，参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
<html>
<head>
<title>CSS 伪类选择器</title>
</head>
<body>
<div id="hover">1. :hover 选择鼠标悬停在元素上的状态</div>
<button>2. :active 选择元素在被电击时的状态</button>
<div>
<div>3. :focus 选择当前拥有焦点的元素，通常是表单元素</div>
<input />
</div>
<div>
<div>:th-child(n) 选择在其父元素中第 n 个字元素的元素</div>
<ul>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
</li>
<li>
<div>4</div>
</li>
<li>
<div>5</div>
</li>
</ul>
</div>
<div>
<div>:first-child, :last-child 选择父元素的第一个和最后一个子元素</div>
<ul>
<li>
<div>1</div>
</li>
<li>
<div>2</div>
</li>
<li>
<div>3</div>
</li>
</div>
<div>
<div>:not(selector) 选择不匹配指定选择器的元素</div>
<p class="text">第一段文本</p>
<p class="special">第二段文本</p>
<p class="text">第三段文本</p>
</div>
<div>
<div> :nth-of-type(n) 选择在其父元素中是第 n 个特定类型的子元素的元素</div>
<strong>
<ul>
<li>
<p>1</p>
</li>
<li>
<p>2</p>
</li>
<li>
<p>3</p>
</li>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
<li>
<p>7</p>
</li>
<li>
<p>8</p>
</li>
<li>
<p>9</p>
</li>
</ul>
</strong>
</div>
</body>
<style>
/* 1. :hover 伪类选择器 */
#hover {
/* set text color black */
color: black;
}
#hover:hover {
color: red;
/* set mouse cursor status */
cursor: pointer;
}
/* 2. :active 伪类选择器 */
button {
background-color: green;
}
button:active {
background-color: red;
}
/* 3. :focus 伪类选择器 */
input:focus {
border: 2px solid blue;
}
/* 4. :nth-child(n) 伪类选择器 */
ul li:nth-child(4) {
background-color: red;
}
/* 5. :first-child, :last-child 伪类选择器 */
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
font-weight: bold;
}
/* 6. :not(selector) 伪类选择器 */
p:not(.special) {
color: red;
}
/* 7. :nth-of-type(n) 伪类选择器 */
strong ul li:nth-of-type(even) {
background-color: #ccc;
}
</style>
</html>
<html>
<head>
<title>CSS 伪元素选择器</title>
</head>
<body>
<div>
<div>1. ::before</div>
<p id="todo">todo</p>
</div>
<div>
<div>2. ::after</div>
<p id="quote">Practice makes perfact</p>
</div>
<div>
<div>3. ::first-line </div>
<div style="display: flex; width: 500px;">
<p id="first-line">
<!-- write some words random-->
但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出
</p>
</div>
</div>
<div>
<div>4. ::first-word</div>
<div style="display: flex; width: 500px;">
<h1>Hello World</h1>
</div>
</div>
<div>
<div>5. ::selection</div>
<div>
<p id="selection">
<!-- write some words random-->
但听得蹄声如雷，十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅，
里面玄色布衣，但见人似虎，马如龙，人既矫捷，马亦雄骏，每一匹马都是高头
长腿，通体黑毛，奔到近处，群雄眼前一亮，金光闪闪，却见每匹马的蹄铁竟然
是黄金打就。来者一共是一十九骑，人数虽不甚多，气势之壮，却似有如千军万
马一般，前面一十八骑奔到近处，拉马向两旁一分，最后一骑从中驰出
</p>
</div>
</div>
</body>
<style>
#todo::before {
content: "\2713"
}
#quote::after {
content: " - Anonymous"
}
#first-line::first-line {
color: red;
font-size: 20px;
}
/* #first-word::first-letter { */
h1::first-letter { font-size: 2em; }
/* } */
#selection::selection {
background-color: yellow;
color: black;
}
</style>
</html>- https://github.com/zjy4fun/notes/tree/main/demos/CSS%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8
- https://github.com/zjy4fun/notes/tree/main/demos/CSS%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8