Применить селектор тегов к непосредственному родительскому элементу правила в глубоко вложенной структуре

Question

Есть несколько похожих вопросов, которые я нашел (например, How to specify a html tag on a LESS CSS nested class?), но ни один из них не работает для правил, вложенных в несколько уровней глубокий.

Вот структура у меня есть:

article { 
    .foo { 
    ... 
    } 
} 

Здесь .foo может быть один из многих различных типов элементов. Для этого вопроса предположим, что одним из этих элементов является элемент a. Я хочу расширить вышеуказанную структуру, чтобы выбрать элемент .foo, чей тег конкретно a из правила .foo.

Проблема с ответом на вопрос, который я связан выше, и различные другие подобные вопросы, в том, что следующий не будет работать:

article { 
    .foo { 
    a& { ... } 
    } 
} 

Вместо Приставка .foo с a теге , как этот:

article a.foo { ... } 

... вся цепь получает приставку:

aarticle .foo { ... } 

(Here's a live example).

Как настроить таргетинг на .foo элементов, чей тег a в правиле .foo?

Answer 1

Похоже, вы заблуждаетесь в желании оптимизировать über-LESS. Если я правильно понимаю, в любом случае ваш скомпилированный CSS будет

article .foo { 
    general `article .foo` styles 
} 
article a.foo { 
    additional styles specific to `article a.foo` 
} 

В LESS вы могли бы написать, что, как есть, или вы могли бы сделать

article { 
    .foo { 
     general `article .foo` styles 
    } 
    a.foo { 
     additional styles specific to `article a.foo` 
    } 
} 

или в зависимости от стилей, вы можете быть в состоянии сделать

article .foo { 
    general `article .foo` styles 
} 
a.foo { 
    additional styles specific to `a.foo` 
}