终于把CSS的伪类与伪元素搞懂,再也不迷糊了!

771 阅读8分钟

图片 (10).jpg

小人-翻跟头.gif

伪类

CSS 伪类是用于选择文档中处于特定状态的元素的一种选择器类型。它们并不是真正的类,因为它们不能在HTML或XML文档中直接定义,而是通过CSS来声明。伪类的名称前通常有一个冒号(:)。

作用

那么在什么情况下,会用到伪类呢?伪类主要用于以下几种情况:

  1. 响应用户交互:例如,:hover:active:focus 可以用于改变元素在鼠标悬停、被激活(如点击或按下)或获取键盘焦点时的外观。
  2. 基于状态的样式:visited 可用于改变已被访问的链接的颜色,:checked 可用于选定的表单控件。
  3. 结构化选择:first-child:last-child:nth-child(n) 等可以用于选择文档树中符合特定位置条件的元素。
  4. 通用排除:not(selector) 可用于排除符合特定选择器的元素。

种类

相较于伪元素,伪类的种类型比较丰富,常用的伪类大概有这些:

  1. UI伪类(User Interface Pseudo-classes)
    • :hover - 当用户将鼠标悬停在元素上时激活。
    • :active - 当元素被用户激活,例如在鼠标按钮被按下时。
    • :focus - 当元素获得焦点时,通常发生在键盘导航中。
    • :focus-within - 当元素或其后代元素获得焦点时。
    • :target - 当元素是URL片段标识符的目标时。
  2. 结构性伪类(Structural Pseudo-classes)
    • :first-child - 选择作为其父元素的第一个子元素的元素。
    • :last-child - 选择作为其父元素的最后一个子元素的元素。
    • :only-child - 选择作为其父元素唯一子元素的元素。
    • :nth-child(n) - 选择作为其父元素的第n个子元素的元素。
    • :nth-last-child(n) - 选择作为其父元素的倒数第n个子元素的元素。
    • :not(selector) - 选择不是由给定选择器匹配的元素。
    • :empty - 选择没有子节点的元素。
    • :root - 选择文档的根元素,通常是 <html> 元素。
  3. 动态伪类(Dynamic Pseudo-classes)
    • :checked - 选择被选中的<input type="checkbox"><input type="radio">元素。
    • :enabled - 选择可用(未禁用)的表单控件。
    • :disabled - 选择被禁用的表单控件。
    • :indeterminate - 选择不确定状态的元素,如部分选中的复选框组。
    • :valid:invalid - 分别选择有效和无效的表单控件。
  4. 用户行为伪类(User Action Pseudo-classes)
    • :link - 选择未访问过的链接。
    • :visited - 选择已被用户访问过的链接。
    • :any(link, visited) - 选择所有链接,无论是否被访问过。
  5. 其他伪类
    • :scope - 选择当前样式作用域内的元素。
    • :dir(ltr|rtl) - 选择具有特定书写方向的元素。

这些伪类可以帮助你根据元素的上下文、状态或用户操作来改变样式,使得CSS更加灵活和动态。使用伪类可以让你无需修改HTML结构即可实现复杂的样式规则。

使用示例

下面是几个简单的示例,以方便具体的理解一下伪类:

/* 当鼠标悬停在链接上时,更改链接颜色 */
a:hover {
  color: red;
}

/* 更改已被访问链接的颜色 */
a:visited {
  color: purple;
}

/* 当输入框获取焦点时,更改边框颜色 */
input:focus {
  border-color: blue;
}

/* 选择列表中偶数项的项目 */
li:nth-child(even) {
  background-color: #f2f2f2;
}

伪元素

CSS 伪元素是在CSS中使用的一种特殊类型的选择器,用于生成非实际DOM树中存在的内容或者对元素的某些特定部分进行样式化。伪元素允许你向页面添加额外的、不可见的结构,或者在元素前后插入内容。它们不会影响文档的实际结构,仅用于样式目的。在CSS3中,伪元素使用双冒号 (::) 来区分它们与伪类。

作用

其实伪元素理解起并不复杂,并且在某些情况下,还特别好有,比如:

  1. 装饰性效果:可以通过伪元素在元素前后插入图标、线条、装饰图形等。
  2. 布局辅助:伪元素可以用来帮助实现特定的布局,例如清除浮动、创建三角形箭头等。
  3. 交互效果:可以利用伪元素实现一些动态效果,如悬停时显示额外信息。
  4. 文本格式化:使用 ::first-letter::first-line 对文本的首字母或首行进行特殊样式处理。
  5. 减少HTML冗余:避免为了装饰目的而在HTML中添加不必要的元素。

种类

除此之外,伪元素的种类也不是很多,经常会用到的大概有6种:

  1. ::before - 在元素的内容之前插入内容。
  2. ::after - 在元素的内容之后插入内容。
  3. ::first-line - 对元素的第一行文本进行样式化。
  4. ::first-letter - 对元素的第一个字符进行样式化。
  5. ::selection - 对用户选中的文本进行样式化。
  6. ::placeholder - 对输入元素的占位符文本进行样式化。

使用示例

假设我们想要在每个段落的开头添加一个小图标作为装饰:

p::before {
  content: "â– "; /* Unicode for a small bullet */
  color: red;     /* Style the bullet */
}

伪元素与伪类的区别:

  • 伪元素(如 ::before::after)用于向文档流中插入内容,它们不对应于任何实际的DOM元素,但可以像普通元素一样接受样式。
  • 伪类则用于选择已经存在的元素并根据其状态应用样式。

实战应用

伪类

1. 鼠标悬停效果

你可以使用 :hover 伪类来改变元素在鼠标悬停时的样式,比如改变链接的颜色或添加阴影效果。

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

.button:hover {
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

2. 活动状态的按钮

:active 伪类可以用于改变按钮在被按下时的样式。

.button:active {
  background-color: #ccc;
}

3. 已访问链接的样式

:visited 伪类允许你改变已访问链接的颜色。

a:visited {
  color: purple;
}

4. 获取焦点的输入框

:focus 伪类可以用于突出显示获取了键盘焦点的元素,这对于无障碍设计非常重要。

input:focus {
  outline: 2px solid blue;
}

5. 表单验证

:valid:invalid 伪类可以用于在表单验证失败或成功时改变输入框的样式。

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

6. 列表项的间隔样式

:nth-child(n) 伪类可以用于选择列表中的每n个元素,并应用不同的样式。

ul li:nth-child(odd) {
  background-color: #eee;
}

7. 第一个子元素的样式

:first-child 伪类可以用于选择父元素的第一个子元素,这在调整列表或文章段落的样式时很有用。

p:first-child {
  font-weight: bold;
}

8. 最后一个子元素的样式

:last-child 伪类可以用于选择父元素的最后一个子元素。

ul li:last-child {
  margin-bottom: 0;
}

9. 仅有的子元素的样式

:only-child 伪类可以用于选择那些是其父元素唯一子元素的元素。

div:only-child {
  margin: auto;
}

10. 交互式导航菜单

:hover:focus 可以结合使用创建响应式导航菜单,比如下拉菜单。

.nav ul {
  display: none;
}

.nav:hover ul,
.nav:focus-within ul {
  display: block;
}

伪元素

1. 清除浮动

使用 ::after 伪元素和 clear:both 来创建一个自清浮动的容器。

.container::after {
  content: "";
  display: table;
  clear: both;
}

2. 插入图标或装饰

在元素前或后插入图标,例如在链接前添加一个箭头图标。

a::before {
  content: "\2192";
  margin-right: 5px;
}

3. 创建列表项的点或数字

使用 ::before::after 来生成列表项的符号,替代默认的列表样式。

ul li::before {
  content: "&#10003;";
  color: green;
  margin-right: 10px;
}

4. 三角形箭头

利用伪元素创建三角形箭头,常用于弹出菜单或提示框。

.popup::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000;
}

5. 自定义列表样式

使用伪元素来自定义列表项的样式,比如使用自定义的图像作为列表项的标记。

ol.custom::before {
  content: url('image.png');
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

6. 首字母大写

使用 ::first-letter 来突出显示段落或标题的首字母。

h1::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 5px;
}

7. 文本阴影或背景

使用伪元素来创建文字背景或阴影效果,尤其在小屏幕上,可以提供更好的可读性。

h1::after {
  content: attr(data-text);
  position: absolute;
  z-index: -1;
  color: rgba(0,0,0,0.7);
  text-shadow: 2px 2px 0 #000;
}

8. 文本高亮

当用户选择文本时,使用 ::selection 来改变选中文本的样式。

::selection {
  background: yellow;
  color: black;
}

9. 占位符效果

使用伪元素来模仿输入框的占位符效果。

input::placeholder {
  color: grey;
}

10. 自定义进度条

使用伪元素来创建一个自定义样式的进度条,可以通过动画或数据属性来控制填充程度。

.progress-bar::before {
  content: "";
  display: block;
  width: 50%; /* 控制进度条的长度 */
  height: 100%;
  background: #4CAF50;
}

喜欢就关注一下吧.gif