父组件修改子组件css_如何在纯CSS中构建过滤组件

最新推荐文章于 2024-08-16 08:32:37 发布

翻译最新推荐文章于 2024-08-16 08:32:37 发布 · 345 阅读

文章标签：

#过滤器 #列表 #css #html #jquery #ViewUI

本文介绍如何仅使用CSS构建一个功能齐全的过滤组件，通过单选按钮和标签实现实时过滤效果，无需JavaScript。

父组件修改子组件css

在今天的教程中，我们将学习如何构建仅CSS的过滤组件，考虑到需要JavaScript，您可以原谅这件事。我们将使用一些简单的标记，一些表单控件以及一些您可能从未使用过的非常有趣CSS选择器。

我们正在努力

Tuts +的每位讲师都有自己的存档页面。我们将使用自己的标记来重新创建这样的教程列表。然后，我们将实现一个组件，该组件将根据帖子所属的类别过滤帖子。

这是我们的最终项目：

让我们开始吧！

1.从HTML标记开始

我们首先确定组件中的过滤器类别。在此示例中，我们将使用七个过滤器：

All
CSS
JavaScript
jQuery
WordPress
Slider
fullPage.js

为此，我们首先定义七个单选按钮，将它们分组在categories关键字下。默认情况下，第一个单选按钮处于选中状态：

<input type="radio" id="All" name="categories" value="All" checked>
<input type="radio" id="CSS" name="categories" value="CSS">
<input type="radio" id="JavaScript" name="categories" value="JavaScript">
<input type="radio" id="jQuery" name="categories" value="jQuery">
<input type="radio" id="WordPress" name="categories" value="WordPress">
<input type="radio" id="Slider" name="categories" value="Slider">
<input type="radio" id="fullPage.js" name="categories" value="fullPage.js">

然后，我们创建一个包含与上述单选按钮相关的标签的有序列表。

请记住，我们一个单选按钮与标签相关联通过设置它的id值等于标签的for价值：

<ol class="filters">
  <li>
    <label for="All">All</label>
  </li>
  <li>
    <label for="CSS">CSS</label>
  </li>
  <li>
    <label for="JavaScript">JavaScript</label>
  </li>
  <li>
    <label for="jQuery">jQuery</label>
  </li>
  <li>
    <label for="WordPress">WordPress</label>
  </li>
  <li>
    <label for="Slider">Slider</label>
  </li>
  <li>
    <label for="fullPage.js">fullPage.js</label>
  </li>
</ol>

接下来，我们设置另一个有序列表，其中包括我们要过滤的元素（我们的卡片）。每个过滤的元素将具有一个自定义的data-category属性，其值是由空格分隔的过滤器列表：

<ol class="posts">
 <li class="post" data-category="CSS JavaScript">...</li>
 <li class="post" data-category="CSS JavaScript">...</li>
 
 <!-- 10 more list items here -->
</ol>

在我们的例子中，过滤后的元素将是帖子。因此，我们将用来描述帖子及其元数据（标题，图像，类别）的标记如下所示：

<article>
  <figure>
    <a href="" target="_blank">
      <img src="IMG_SRC" alt="">
    </a>
    <figcaption>
      <ol class="post-categories">
        <li>
          <a href="">...</a>
        <li>
        
        <!-- possibly more list items here -->
      </ol>
      <h2 class="post-title">
        <a href="" target="_blank">...</a>
      </h2>
    </figcaption>
  </figure>
</article>

准备好标记后，让我们将注意力转移到所需的样式上。

2.定义样式

我们首先在视觉上隐藏单选按钮：

input[type="radio"] {
  position: absolute;
  left: -9999px;
}

然后，我们向过滤器添加一些样式：

:root {
  --black: #1a1a1a;
  --white: #fff;
  --green: #49b293;
}

.filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.5rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: 2rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
}

.filters label:hover {
  background: var(--green);
  color: var(--white);
}

CSS网格布局

我们继续为过滤后的元素指定一些样式。最重要的是，我们根据屏幕尺寸使用CSS Grid进行不同的布局：

:root {
  --black: #1a1a1a;
  --white: #fff;
  --green: #49b293;
}

.posts {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
}

.posts .post {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.posts .post-title {
  font-size: 1.3rem;
}

.posts .post-title:hover {
  text-decoration: underline;
}

.posts figcaption {
  padding: 1rem;
}

.posts .post-categories {
  margin-bottom: 0.75rem;
  font-size: .75rem;
}

.posts .post-categories * {
  display: inline-block;
}

.posts .post-categories li {
  margin-bottom: 0.2rem;
}

.posts .post-categories a {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid;
  line-height: normal;
  background: all 0.1s;
}

.posts .post-categories a:hover {
  background: var(--green);
  color: var(--white);
}

@media screen and (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 650px) {
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

注意：出于可读性原因，在我们CSS中，我们不对通用CSS规则进行分组。

添加过滤样式

这里的想法非常简单。每次我们单击过滤器时，仅应显示相应的过滤元素（帖子）。为了实现该功能，我们将结合使用以下CSS好东西：

的 :checked 伪类
否定伪类（ :not() ）
属性选择器
通用的同级组合器（ ~ ）在CSS4中重命名为“后续同级选择器”

当我们单击All过滤器时，将显示所有具有data-category属性的帖子：

[value="All"]:checked ~ .posts [data-category] {
  display: block;
}

当我们单击任何其他过滤器类别时，将仅显示目标帖子：

[value="CSS"]:checked ~ .posts .post:not([data-category~="CSS"]),
[value="JavaScript"]:checked ~ .posts .post:not([data-category~="JavaScript"]),
[value="jQuery"]:checked ~ .posts .post:not([data-category~="jQuery"]),
[value="WordPress"]:checked ~ .posts .post:not([data-category~="WordPress"]),
[value="Slider"]:checked ~ .posts .post:not([data-category~="Slider"]),
[value="fullPage.js"]:checked ~ .posts .post:not([data-category~="fullPage.js"]) {
  display: none;
}

例如，只要我们单击“ Slider过滤器类别，只有属于“ Slider类别的帖子才可见。

值得一提的是，在我们的风格，而不是上面的[att~=val]语法，我们同样可以使用了[att*=val]语法。细微的变化如下所示：

[value="CSS"]:checked ~ .posts .post:not([data-category*="CSS"]),
[value="JavaScript"]:checked ~ .posts .post:not([data-category*="JavaScript"]),
[value="jQuery"]:checked ~ .posts .post:not([data-category*="jQuery"]),
[value="WordPress"]:checked ~ .posts .post:not([data-category*="WordPress"]),
[value="Slider"]:checked ~ .posts .post:not([data-category*="Slider"]),
[value="fullPage.js"]:checked ~ .posts .post:not([data-category*="fullPage.js"]) {
  display: none;
}

快速CSS选择器说明

这个选择器到底在说什么？

第一位[value="CSS"]:checked查找具有特定值（在这种情况下为“ CSS”）的选中的单选按钮。

在那之后，代字号（〜）是我们今天所称的“后续兄弟选择器”。它选择与上一个元素具有相同父元素的元素，即使它们没有立即跟随标记。所以~ .posts .post寻找元素.posts .post与被检查的单选输入共享相同的父元素。

为了更具体， :not([data-category~="CSS"])将选择器优化为仅那些不具有data-category属性的.post元素，该属性在空格内某处包含CSS值清单。

然后应用display: none; 符合这些条件的任何元素。

这是一个非常复杂的选择器，即使它完全合乎逻辑。用人类语言术语，您可以将其描述为：

“当选中值为“ CSS”的收音机时，请在其数据类别列表中找到所有不包含“ CSS”的后继元素，并将其隐藏。”

造型的最后一点

最后，我们添加一个规则来突出显示活动过滤器类别：

:root {
  --black: #1a1a1a;
  --white: #fff;
  --green: #49b293;
}

[value="All"]:checked ~ .filters [for="All"],
[value="CSS"]:checked ~ .filters [for="CSS"],
[value="JavaScript"]:checked ~ .filters [for="JavaScript"],
[value="jQuery"]:checked ~ .filters [for="jQuery"],
[value="WordPress"]:checked ~ .filters [for="WordPress"],
[value="Slider"]:checked ~ .filters [for="Slider"],
[value="fullPage.js"]:checked ~ .filters [for="fullPage.js"] {
  background: var(--green);
  color: var(--white);
}