很难理解这个响应式css代码

Question

所以我一直试图理解下面的代码,但我从未见过人们以这种方式使用CSS.

有人可以解释他们在做什么吗？何时以及为什么要使用:\ , > , < , * , +.还有什么00\25意思呢？

如果有人能够对此有所了解,我将非常感激!我知道我可以在某个地方的文档中找到所有这些,但是如果你已经掌握了这些知识,我将非常感谢你能与我分享!

这是代码的一部分.

    .row.\30 \25 > * {
        padding: 0 0 0 0em;
    }

    .row.\30 \25 {
        margin: 0 0 -1px 0em;
    }

    .row.uniform.\30 \25 > * {
        padding: 0em 0 0 0em;
    }

    .row.uniform.\30 \25 {
        margin: 0em 0 -1px 0em;
    }

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1.5em 0 0 1.5em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
        padding: 0 0 0 3em;
    }

    .row.\32 00\25 {
        margin: 0 0 -1px -3em;
    }

    .row.uniform.\32 00\25 > * {
        padding: 3em 0 0 3em;
    }

    .row.uniform.\32 00\25 {
        margin: -3em 0 -1px -3em;
    }

    .row.\31 50\25 > * {
        padding: 0 0 0 2.25em;
    }

    .row.\31 50\25 {
        margin: 0 0 -1px -2.25em;
    }

    .row.uniform.\31 50\25 > * {
        padding: 2.25em 0 0 2.25em;
    }

    .row.uniform.\31 50\25 {
        margin: -2.25em 0 -1px -2.25em;
    }

    .row.\35 0\25 > * {
        padding: 0 0 0 0.75em;
    }

    .row.\35 0\25 {
        margin: 0 0 -1px -0.75em;
    }

    .row.uniform.\35 0\25 > * {
        padding: 0.75em 0 0 0.75em;
    }

    .row.uniform.\35 0\25 {
        margin: -0.75em 0 -1px -0.75em;
    }

这是一个包含更多CSS的JSfiddle:http: //jsfiddle.net/c788hvmw/

Answer 1

有人可以解释一下他们在做什么吗？何时以及为什么应该使用： \ 、 > 、 < 、 * 、 +。

它们是不同类型的CSS 选择器。

>是一个子选择器。它的使用示例是：

p {
  color: blue;
}
div > p {
  color: red;
}

<p>This text will be blue</p>
<div>
  <p>This text will be red</p>
  <form>
    <p>This text will not be red, but blue</p>
  </form>
</div>

*是一个通配符选择器。这将选择其所使用级别的所有元素。

\用于转义unicode 字符，因此在您的代码中它用于转义不同的百分比，例如

/* this means .row.0% */
.row.\30 \25 > * {
    padding: 0 0 0 0em;
    color: red;
}

<div class="row 0%">
  <p>Red text</p>
  <span>Red text</span>
  <br>
  default colour text
</div>

更新

但是什么时候使用 \30\25 有用呢？

如果您有一个以数字开头的类/ID，这将很有用，因为 CSS 语法规则不允许这样做，因此您需要转义该数字。使用示例 CSS查看此JSFiddle 。

话虽这么说，我个人会避免以数字开头，除非您发现自己在处理别人的代码时需要这样做，因为它更难阅读。