css - 很难理解这个响应式 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

Can someone explain what they are doing? when and why should you use: \ , > , < , * , +.

它们是不同类型的 CSS Selectors .

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

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 characters ，因此在您的代码中它用于转义不同的百分比，例如

/* 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>

更新

But when would it be useful to use \30\25 for instance?

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

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