CSS | :无效的选择器

在CSS中，有些选择器是无效的，使用它们不会对页面产生任何影响。在本文中，我们将介绍一些CSS中的无效选择器。

1. :active 和 :hover on非标签

:active 和 :hover 伪类通常用于标签，但是它们只能用于可以接收“鼠标按下”和“鼠标悬停”事件的元素。如果您尝试将它们应用于除标签以外的元素，它们将被视为无效选择器。

/* 无效选择器，:active 和 :hover 只能用于<a>标签 */
div:active {
  background-color: red;
}

2. :first-child 和 :last-child on唯一子元素

:first-child 和 :last-child 选择器是用于选择父级元素的第一个子元素和最后一个子元素的伪类。在某些情况下，它们可能会被错误地应用于仅具有一个子元素的父元素。这时候这些选择器是无效的。

<div class="parent">
  <div class="child"></div>
</div>

/* 无效选择器，只有一个子元素 */
.parent:first-child {
  background-color: red;
}

3. :before 和 :after on void元素

:before 和 :after 伪元素可用于在元素内容的前面或后面添加内容。但是，它们不能用于void元素，如和等，因为这些元素没有内容需要添加。

<input type="text" class="input-box" value="username">

/* 无效选择器，:before 和 :after 不能用于void元素 */
.input-box:before {
  content: "Username:";
}

4. :focus on不可聚焦元素

:focus 伪类是用于选择被元素聚焦状态的选择器，如文本输入框和按钮等。然而，对于非交互元素，如

<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>

/* 无效选择器，<div>元素不能聚焦 */
.content:focus {
  background-color: yellow;
}

<div class="checkbox">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Agree to terms</label>
</div>

/* 无效选择器，<div>元素不是input[type=checkbox] */
.checkbox:checked {
  background-color: yellow;
}