содержание атр внешних тегов

Question

Ну в SCSS, что-то вроде этого

obj { 
    obj2 { 
    content: attr(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> 

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>