Question

SCSS很好，就像这样

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

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

这将是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>

<强> SCSS

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>

外部标签的内容attr

1 个答案: