Подклассы CSS, правильно ли я делаю это?
4 Juicy [2013-09-03 11:43:00]
.popUp
{
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
background-color: white;
}
.question .popUp
{
width: 300px;
height: 20px;
border: 1px solid black;
background-color: black;
}
Как вы можете видеть, я пытаюсь сделать класс вопросов подклассом класса popUp. Из того, что я googled, это должно работать, но это не так. Если я сделаю это вместо:
.question
{
width: 300px;
height: 20px;
border: 1px solid black;
background-color: black;
}
Это работает, но это не соответствует точке.
css subclass
4 ответа
4 Решение Dipesh Parmar [2013-09-03 11:46:00]
popup class является контейнером parent, тогда вы должны выбрать его, как показано ниже.
.popUp .question
поэтому синтаксис будет parent space child
3 Kevin Bowersox [2013-09-03 11:46:00]
Сохраняйте общие стили в базовом классе, затем добавьте определенные/переопределенные свойства в подкласс.
.popUp
{
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
background-color: white;
}
.popUp-question
{
/*width: 300px; This can move to parent */
height: 20px;
border: 1px solid black;
background-color: black;
}
Использование
<div class="popUp popUp-question"></div>
Взгляните на загрузочную документацию, которая демонстрирует использование подклассов во многих компонентах. Их соглашения, похоже, включают в себя имя базового класса в подклассе. Например, базовый класс alert и подкласс alert-success.
2 Paolo Stefan [2013-09-03 11:46:00]
Это наоборот. Контейнер должен находиться перед содержащимся элементом в определении:
.popUp .question
{
width: 300px;
height: 20px;
border: 1px solid black;
background-color: black;
}
1 Flame Trap [2013-09-03 11:45:00]
Try:
.popUp .question {
...
}