伪类

伪类选择器，顾名思义，是一种特殊的选择器，它用来选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的，而是由用户行为（如点击、悬停）或元素的状态（如被访问、被禁用）来定义的。例如，我们可以用伪类选择器来改变链接在不同状态下的颜色，从而给用户以视觉反馈。

伪类选择器的语法

注意：伪类名称对大小写不敏感；

selector:pseudo-class {
  property: value;
}
a:link {
  color: #FF0000;
}
input:focus {
  background-color: yellow;
}

动态伪类选择器

:hover：当鼠标悬停在元素上时的样式。
:active：当元素处于活动状态时的样式。
:visited：当用户访问过该链接时的样式。
:focus：当元素获得焦点时的样式。

a:hover {
  color: red;
}
button:active {
  background-color: blue;
}
a:visited {
  color: purple;
}
input:focus {
  border-color: green;
}

UI元素状态伪类选择器

这类选择器用于描述元素在用户界面中的状态。

:enabled和:disabled：用于表单元素，表示元素是否可用。
:checked：用于单选框或复选框，表示元素是否被选中。

input:disabled {
  border-color: gray;
}
input[type="radio"]:checked {
  background-color: yellow;
}

结构伪类选择器

这类选择器用于根据元素在文档结构中的位置来选择元素。

:first-child：选择父元素下的第一个子元素。
:last-child：选择父元素下的最后一个子元素。
:nth-child(n)：选择父元素下的第n个子元素。
p:nth-last-child(n) 选择所有p元素倒数的第n个子元素
p:nth-last-of-type(n) 选择所有p元素倒数的第n个为p的子元素
p:nth-of-type(n) 选择所有p元素第n个为p的子元素
p:only-of-type 选择所有仅有一个子元素为p的元素
p:only-child 选择所有仅有一个子元素的p元素
:root 选择文档的根元素

li:first-child {
  background-color: green;
}
li:last-child {
  background-color: red;
}
li:nth-child(odd) {
  background-color: blue;
}
……

否定伪类选择器

这类选择器用于排除符合特定条件的元素。:not(selector)：选取不符合括号内选择器的所有元素。

*:not(p) {
  background-color: gray;
}

其它

:empty 选择所有没有子元素的p元素
:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素
:last-of-type 选择的每个 p 元素是其父元素的最后一个 p 元素
:in-range 选择元素指定范围内的值
:invalid 用户输入无效内容
input:out-of-range 选择指定范围以外的值的元素属性
input:read-only 用户输入只读内容
input:read-write 选择没有只读属性的元素属性
input:optional 选择没有"required"的元素属性
input:valid 选择所有有效值的属性

p:empty
{
    background:#ff0000;
}

p:first-of-type
{
	background:#ff0000;
}

p:last-of-type
{
background:#ff0000;
}

/* <input type="number" min="5" max="10" value="7" /> */
input:in-range
{
	border:2px solid yellow;
}
input:out-of-range
{
	border:2px solid red;
}

/* <input id="name" type="text" placeholder="Enter your name" pattern="[A-Za-z]*"/> */
input:invalid{
  animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.4em red;
}
@keyframes shake {
  0% { margin-left: 0rem; }
  25% { margin-left: 0.5rem; }
  75% { margin-left: -0.5rem; }
  100% { margin-left: 0rem; }
}

input:optional
{
  background-color: yellow;
}

#news:target 选择当前活动#news元素(点击URL包含锚的名字)

/* <p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p> */
:target
{
	border: 2px solid #D4D4D4;
	background-color: #e5eecc;
}

伪元素

与伪类选择器不同，伪元素选择器是用来选择DOM元素的特定部分，而不是整个元素。它们通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容（如内容前面的编号）。伪元素选择器允许我们对页面上的某些部分进行精确的样式控制，而这些部分在HTML结构中并不存在。

伪元素选择器语法

selector::pseudo-element {
  property: value;
}
p::first-line {
  color: #ff0000;
}
h1::before {
  content: '♥';
}

常用伪元素选择器

::first-line：选择元素中的第一行。
::first-letter：选择元素中的第一个字母。
p:first-child 选择元素中的第一个子元素。
::before和::after ::before表示元素的开始，::after表示元素的最后，before和after必须结合content属性来使用。
p:lang(it) 为
元素的lang属性选择一个开始值
::selection 将样式应用于用户已突出显示的文档部分

p::first-line{
    color: blue;
}
p::first-letter{
    font-size: 30px;
    color: blueviolet;
}
p::after{
    content: "hahaha";
    color: red;
}
p::before{
    content: "hehehe";
    color: coral;
}

/* <p lang="it">Ciao bella!</p> */
p:lang(it){ 
	background:yellow;
}
/* <q lang="no">A quote in a paragraph</q> */
q:lang(no)
{
	quotes: "~" "~";
}

CSS常用伪类和伪元素

伪类

伪类选择器的语法

动态伪类选择器

UI元素状态伪类选择器

结构伪类选择器

否定伪类选择器

其它

伪元素

伪元素选择器语法

常用伪元素选择器