SCSS

明白原理，就简单多了，首先来看整体的代码：

body{
  margin:0;
  text-align:center;
  font-family: Verdana;
  background:#f5f5f5;
}
h1 {
  text-align:center;
}
.container {
  width:90%;
  margin:0 auto;
}
input[type="radio"] {
  display:none;
}
label {
  width:23%;
  float:left;
  text-align:center;
  background:#ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  color:#222222;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
  cursor:pointer;
}
input[type="radio"]{
  &[id="men"]:checked {
    * label {
      background:#6666ff;
    }
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }

  &[id="women"]:checked {
    * label {
      background:#ff4466;
    }
    ~ .men,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
  &[id="children"]:checked {
    * label {
      background:#66dd99;
    }
    ~ .men,
    ~ .women {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
}
.tile {
  width:23%;
  float:left;
  transition:all 1s;
  margin:0.5%;
  padding:0.5%;
  background:#6666ff;
  img {
      width: 100%;
    }
}

简单的解析一下这个样式代码。

为了页面好看，首先把隐藏掉：

input[type="radio"] {
  display:none;
}

我们通过label的for属性来控制radio有没有选中。美化一下label样式：

label {
    width:23%;
    float:left;
    text-align:center;
    background:#ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color:#222222;
    padding:0.5%;
    margin:0.5%;
    margin-bottom:30px;
    cursor:pointer;
}

接下来样式代码也是最关键的一部分，当input选中之后label的样式：

input[type="radio"]{
  &[id="men"]:checked {
    + label {
      background:#6666ff;
    }
  }
  ...
}

上面的代码表示的是选择中:checked时，其相邻的label改变背景颜色。

根据前面的原理介绍，可以得知，当我们选择了”男装“，那么”女装“和”童装“就需要隐藏，在这里通过假像来隐藏，也就是input[type="radio"][id="men"]选中，其相通兄弟元素.women和.children隐藏掉：

input[type="radio"]{
  &[id="men"]:checked {
    ...
    ~ .women,
    ~ .children {
      width:0;
      height:0;
      padding:0;
      margin:0;
      opacity:0;
    }
  }
}

其他两个选项也是类似的，就不在做过多的阐述。

美化的样式，这里就不说了，大家都懂的。

通过这个过程下来，你就能看到前面DEMO展示的效果了。
总结

本文主要介绍了如何依赖于CSS的属性选择器、通用相邻兄弟选择器和伪类选择器来实现一个简单的内容过滤的功能。在整个实例当中，要把握的是严谨的HTML结构，因为相邻兄弟选择器对于结构的依赖程度非常的强。也就是说结构修改之后，你的选择器和样式都要做一定的修改。

通篇下来，是不是觉得非常的简单。如果你感兴趣的话，可以借助这个案例的思路，通过”复选框“按钮来实现多项内容过滤的效果。也就是符合多个条件的内容显示，不符合的隐藏。试试呗，你一定行。