版本控制 - 外部标记的内容属性

Question

好吧，在SCSS中，像这样

obj {
  obj2 {
    content: attr(val) ; /**/
  }
}

其中"val"属性设置在"obj"中，而不是"obj2"。如何使用外部元素的属性？

这将是 html 内容的示例：

<obj val="$">
  <obj2>a</obj>
  <obj2>b</obj>
  <obj2>c</obj>
</obj>

Answer 1

content: "";用于伪元素（:before，:after），而不是像<obj2>这样的常规元素。您无法从子元素访问父元素的属性，因此在您描述的 HTML 中，您将无法获取属性 val。

您应该设置如下结构：

.HTML

<obj currency="USD">
  <obj2>1</obj2>
  <obj2>2</obj2>
  <obj2>3</obj2>
</obj>

南海

obj {
    /*Stylings*/
    obj2{
        /*Stylings*/
    }
    &[currency="USD"]>*:before {
        content:'$';
    }
    &[currency="GBP"]>*:before {
        content:'£';
    }
    &[currency="EUR"]>*:before {
        content:'€';
    } 
}

---

@charset "UTF-8";
obj {
  /*Stylings*/
}
obj obj2 {
  /*Stylings*/
}
obj[currency="USD"] > *:before {
  content: '$';
}
obj[currency="GBP"] > *:before {
  content: '£';
}
obj[currency="EUR"] > *:before {
  content: '€';
}

<obj currency="USD">
  <obj2>1</obj2>
  <obj2>2</obj2>
  <obj2>3</obj2>
</obj>