Как ограничить область действия в HTML? [закрыто] ⇐ CSS

[Anonymous]

Этот ответ на этот вопрос, вероятно, чрезвычайно очевиден, и я его просто не вижу, но как убедиться, что определенные атрибуты стиля применяются только к одному элементу при ссылке на тег, который они используют?
В настоящее время у меня есть чистый CSS Collapsible, который я взял из DigitalOcean, и я использую компоненты Ember.
В коде используется флажок для активации Collapsible, что означает, что он скрывает флажок в тег стиля, ссылающийся на тег ввода:

Код: Выделить всё

input[type='checkbox'] {
display: none;
}


...

Однако при этом все остальные флажки на странице также становятся скрытыми.
(И этот тег стиля находится внутри файла компонента .hbs для раскрывающийся список, не знаю, меняет ли это что-нибудь)
Как я могу настроить таргетинг только на Collapsible специально для скрытия флажка?
Также дайте мне знать, если есть какая-либо другая информация, которая может быть полезно
До сих пор я пробовал обернуть этот атрибут внутри другого атрибута:

Код: Выделить всё

 .hide-checkbox {
input[type='checkbox'] {
display: none;
}
}

Но это просто дало мне поле для ввода текста вместо флажка.
Я также проверил этот пост, но там не упоминалось и не уточнялось что-нибудь об упаковке атрибута, поэтому я задал отдельный вопрос.

Подробнее здесь: https://stackoverflow.com/questions/787 ... pe-in-html