这种式样的结构叫什么？

Question

我试图修改最初由图形编辑器生成的SVG文件。我不知道它在这一节中做了什么，我也无法在文档中找到正确的指导。

具体来说，它定义了三个类cls-1、-2和-3，它们似乎是在括号后面的.cls引用的基础上构建的。

这是级联，继承，影子树吗？我发现的任何指南都没有显示出这样的结构。

提前谢谢你，

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
  <defs>
    <style>
      .cls-1{stroke-width:2.8px;}.cls-1,
      .cls-2,
      .cls-3{fill:none;stroke:#FFF;}.cls-1,
      .cls-3{stroke-miterlimit:10;}.cls-2{stroke-linecap:round;stroke-linejoin:round;}.cls-2,
      .cls-3{stroke-width:2.5px;}
    </style>
  </defs>

  <g id="Layer_1-2">

    <!-- 180mm rectangle with corner radius 20 -->
    <rect   class="cls-1" x="10" y="10" width="180" height="180" rx="20" ry="20"/>

我试着用类似的结构定义新的类，但是对结果没有任何意义

Answer 1

让我们重新格式化让事情更容易阅读..。

<style>
  .cls-1 {stroke-width:2.8px;}
  .cls-1, .cls-2, .cls-3 {fill:none;stroke:#FFF;}
  .cls-1, .cls-3 {stroke-miterlimit:10;}
  .cls-2 {stroke-linecap:round;stroke-linejoin:round;}
  .cls-2, .cls-3 {stroke-width:2.5px;}
</style>

• 这个。意味着下面是一个类名，所以第一个规则为类名cls-1设置了笔画宽度: 2.8px
• 因此，第二个规则集逗号独立选择器设置为FFF，用于cls-1、cls-2和cls-3。也就是说，同一组样式与所有三个类相关联，而不必重复样式规则三次。
• 其他规则向这些类中的一个或多个添加更多属性。