CSS 属性选择器，后面有另一个选择器

Question

I am trying to do something like this in Angular:

css

header-wrap[icon="taco"] icon-element {margin: 1rem;}

HTML

<header-wrap icon="taco">
 <icon-element></icon-element>
</header-wrap>

But it will not work. Are attribute selectors "end of the road" selectors? Meaning you cannot select things after it? The strange part is that when I use document.querySelectorAll in chrome inspector it returns the element I want, but any attempt to write a style for this case fails.

Answer 1

I tested your code and it works on my side! Your CSS code is right and it targets well the element you want.

The problem would apparently be that your tag icon-element is empty. When I added some text in it the CSS changes occurred.