Безпосередній вибір дитини в МЕНШЕ

112

Чи все-таки доведеться ЛЕШЕ застосовувати до виводу негайний селектор (>)?

У моєму стилі. Я не хочу написати щось на зразок:

.panel {
    ...
    > .control {
        ...
    }
}

і МЕНШЕ генерувати щось на кшталт:

.panel > .control { ... }

css css-selectors less

— Дейв
джерело

stackoverflow.com/questions/7634932/less-js-strong-nested-rules

— thirtydot

15

Дивно, що фрагмент у вашому запитання вже був правильною відповіддю.

— тридцятьдо

@thirtydot Звичайно, за винятком того, що він не працює ... не, якщо ви не видалите пробіл або додасте "&". Я використовую less.js. Не можу сказати точно для інших парсерів.

— Дейв

2

Я просто перевіряв, і вихідний код з Вашого питання робить роботу в less.js. Побачите самі: jsfiddle.net/thirtydot/vcE8t

— тридцять до

1

Так, вибачте, це працює як шарм із простором. +1 для вас. Я не знаю, як це не працювало на мене вчора годинами ... інакше я б не розмістив питання.

— Дейв

144

ОНОВЛЕННЯ

Насправді код в оригінальному питанні справно працює. Можна просто дотримуватися >дитячого селектора.

Знайшов відповідь.

.panel {
    ...
    >.control {
        ...
    }
}

Зверніть увагу на відсутність місця між ">" і ".", Інакше це не працюватиме.

— Дейв
джерело

4

Я б не сумнівався, що це помилка, якщо вона не працює з простором там, якщо це спеціально не зафіксовано.

— BoltClock

Це просто обдурити парсер. Він сприймає це як один селектор, тому ви отримуєте .panel >.control.

— Рікардо Томасі

Я сприймаю це як особливість, а не помилку. Це набагато послідовніше, коли ви використовуєте його таким чином, на відміну від "&". Я думаю, що зрозуміліший код, якщо ви використовуєте лише "&" з псевдокласами, а не з дитячими класами.

— Дейв

1

Це особливість CSS, яка приймає і div > pі, і div>p. Послідовність завжди використовує простір між селекторами (погляньте на створений CSS).

— Рікардо Томасі

Звичайно, але мене більше хвилює послідовність використання &.

— Дейв

78

Офіційний спосіб:

.panel {
  & > .control {
    ...
  }
}

& завжди посилається на поточний селектор.

Дивіться http://lesscss.org/features/#features-overview-feature-nested-rules

— Рікардо Томасі
джерело

1

Я думаю, що це також просто ошукання аналізатора (як ви відчували щодо іншої відповіді). Дозволь пояснити. Як ви сказали, & завжди посилається на поточний (батьківський) вибір. Тож все, що після цього, має стосуватися батьків. І ось роль псевдокласів. Безпосередні дитячі класи ближче до дитячих класів ****, а не до псевдокласів. Тож використання просто> є більш інтуїтивним та логічним.

— Дейв

6

Що ви вважаєте правильнішим? div > pабо div >p? &Комбінатор канонічний спосіб зробити це в LESS, що не мої почуття. Ваше пояснення є реторичним. Деякі люди записують свій CSS в одному рядку ...

— Рікардо Томасі

Більшість людей використовують менше, тому їм не потрібно піклуватися про фактичний CSS, який створюється. Так чи інакше, виявляється, що простір можна використовувати після>. Отже & суто зайве.

— Дейв

13

Правильний синтаксис буде дотримуватися під час використання "&", тут буде зайвим.

.panel{
   > .control{
   }
}

Згідно з меншими вказівками , "&" використовується для параметризації предків (але такої потреби тут немає). У цьому прикладі менше , і: ширяння необхідно більш : парити в іншому випадку це призведе до синтаксичну помилку. Однак тут немає такої синтаксичної вимоги щодо використання "&". В іншому випадку всі гніздування потребують "&", оскільки вони по суті стосуються батьків.

— sbharti
джерело

1

@JJF жодних питань, тому що це відповідь?

— Білл Вудгер

0

Якщо вам потрібно націлити більше селекторів:

.parent {
    >.first-child,
    >.second-child,
    >.third-child {
    ...
    }
}

— stojsins
джерело

-1

Крім того, якщо ви орієнтуєтесь на перший дочірній елемент, наприклад перший <td>з a <tr>, ви можете використовувати щось подібне:

tr {
    & > td:first-child {font-weight:bold;}
}

це допомагає зменшити оголошення класів, коли вони не потрібні.

— seth yount
джерело