让你的CSS像Jquery一样做筛选的实现方法

实现CSS像JQuery一样做筛选可以使用CSS3选择器，例如： :checked，:not，:first-child，:nth-child等。下面我将详细介绍如何使用这些选择器。

1. :checked选择器

:checked选择器会选择被选中的表单元素，例如多选框和单选框。通过这个选择器，我们能够选择当前被选中的多选框或单选框，从而实现自定义样式的修改。

以下是一个示例代码：

<input type="checkbox" id="checkbox-1" checked>
<label for="checkbox-1">选项1</label>

<input type="checkbox" id="checkbox-2">
<label for="checkbox-2">选项2</label>

<input type="checkbox" id="checkbox-3">
<label for="checkbox-3">选项3</label>

input[type="checkbox"]:checked + label {
  color: red;
}

在上面的代码中，我们使用了属性选择器和子选择器来实现用户自定义的样式，当用户勾选多选框1时，标签1就会变成红色。

2. :not选择器

:not选择器会过滤掉被选择的元素，例如我们经常使用:visited来选择所有已访问的链接或:enabled来选择所有可用的表单元素。

以下是一个示例代码：

<ul>
  <li>选项1</li>
  <li class="unselected">选项2</li>
  <li>选项3</li>
  <li class="unselected">选项4</li>
</ul>

li:not(.unselected) {
  background-color: yellow;
}

在上面的代码中，我们使用:not选择器来选择所有未选择的列表项，并将这些列表项的背景颜色设置为黄色。

3. :first-child和:nth-child选择器

分别表示第一个子元素和指定位置的子元素。可以使用这两个选择器来选择复杂结构中的元素。

以下是一个示例代码：

<div class="parent">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  <p class="first">Maecenas tincidunt eros at fringilla.</p>
  <p>Vestibulum sagittis dolor at semper finibus.</p>
  <p>Praesent ut molestie lectus, at iaculis nibh.</p>
  <p class="selected">Vivamus vel erat eu ante consequat venenatis.</p>
  <p>Aliquam faucibus velit blandit diam pellentesque tristique.</p>
  <p>Ut aliquet euismod sollicitudin.</p>
</div>

.parent p:first-child {
  background-color: #f0f0f0;
}

.parent p:nth-child(4n) {
  color: red;
}

在上面的代码中，我们将第一个p元素的背景颜色设置为灰色，并且将第4个，8个，12个等的p元素的字体颜色设置为红色。

通过CSS3选择器，我们可以轻松地实现让CSS像JQuery一样做筛选。