Как применить CSS к конкретным дочерним элементам [closed]

Question

Как применить CSS к конкретным дочерним элементам [closed]

1

У меня есть этот CSS и поиск более умного/лучшего способа написать это.

daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-secondary,
daypicker>table>tbody>tr>td>button.btn.btn-default.btn-info,
daypicker>table>tbody>tr>td>button.btn.btn-sm.btn-info,
daypicker>table>tbody>tr>td>button.btn.btn-sm{
    padding: 0.25rem;
    font-size: 0.8rem;
}

Mayble Я должен положить daypicker>table>tbody>tr>td в переменную?

Из другого аналогичного вопроса в StackOverflow я понимаю, что могу использовать универсальные селектора, но не знаю, как его использовать в моем случае.

Shay 12 сен. 2017, в 11:05

Источник

1

не могли бы вы поделиться HTML кодом
brk 12 сен. 2017, в 09:03
0

Вы можете либо добавить уникальный класс ко всем этим элементам и нацелить его таким образом, либо сузить его, удалив вложенные родительские элементы, и перейдите с daypicker > button если я правильно понимаю ваш вопрос.
Matt Newelski 12 сен. 2017, в 09:05
0

daypicker не является типом элемента, это, вероятно, имя класса или идентификатор; в этом случае вам нужно написать либо .daypicker (если имя класса), либо #daypicker (если идентификатор).
David Thomas 12 сен. 2017, в 09:06
0

Я использую эту библиотеку в своем угловом проекте. github.com/Gillardo/ngx-bootstrap-datetime-popup с использованием начальной загрузки v.4 и необходимо внести некоторые изменения в CSS. это HTML: <datepicker * ngIf = "showDate" [(ngModel)] = "formattedValue" (ngModelChange) = "onPickerChange ()" [showWeeks] = "showWeeks" [datepickerMode] = "datepickerMode" [minDate] minDate "[maxDate] =" maxDate "[dateDisabled] =" dateDisabled "> </ datepicker>
Shay 12 сен. 2017, в 09:10
0

daypicker - это элемент, который я установил с github, у меня нет к нему доступа, поэтому я не могу добавить класс к соответствующим элементам. Приведенный выше CSS работает, но я ищу способ улучшить его.
Shay 12 сен. 2017, в 09:12

Показать ещё 3 комментария

Теги:

javascript

css

scss-lint

1 ответ

Ещё вопросы

не могли бы вы поделиться HTML кодом
Вы можете либо добавить уникальный класс ко всем этим элементам и нацелить его таким образом, либо сузить его, удалив вложенные родительские элементы, и перейдите с daypicker > button если я правильно понимаю ваш вопрос.
daypicker не является типом элемента, это, вероятно, имя класса или идентификатор; в этом случае вам нужно написать либо .daypicker (если имя класса), либо #daypicker (если идентификатор).
Я использую эту библиотеку в своем угловом проекте. github.com/Gillardo/ngx-bootstrap-datetime-popup с использованием начальной загрузки v.4 и необходимо внести некоторые изменения в CSS. это HTML: <datepicker * ngIf = "showDate" [(ngModel)] = "formattedValue" (ngModelChange) = "onPickerChange ()" [showWeeks] = "showWeeks" [datepickerMode] = "datepickerMode" [minDate] minDate "[maxDate] =" maxDate "[dateDisabled] =" dateDisabled "> </ datepicker>
daypicker - это элемент, который я установил с github, у меня нет к нему доступа, поэтому я не могу добавить класс к соответствующим элементам. Приведенный выше CSS работает, но я ищу способ улучшить его.

weBBer · Accepted Answer · 2017-09-12T06-32-00.000Z

0

Лучший ответ

Обновлен ответ в соответствии с комментарием

У фрагмента в вашем Q есть button.btn поэтому вы можете просто использовать его, но в соответствии с вашим комментарием этот стиль вам не нужен на button.btn.btn-sm.btn-danger в этом случае вы можете работать с этими решениями:

# 1

 .daypicker>table>tbody>tr>td>button.btn:not(.btn-danger){
    padding: 0.25rem;
    font-size: 0.8rem;
 }

Этот CSS будет выбирать все элементы button.btn кроме одного (-ов) с классом.btn-danger. См. Ссылку

# 2

.daypicker>table>tbody>tr>td>button.btn{
    padding: 0.25rem;
    font-size: 0.8rem;
}


/*the style below will reset to your need for .btn-danger*/;

.daypicker>table>tbody>tr>td>button.btn.btn-danger{
   padding: /*your desired size*/;
   font-size: /*your desired size*/;
}

Это зависит от вас, чтобы использовать тот, который подходит для вашего требования. Надеюсь, это поможет вам.

weBBer 12 сен. 2017, в 06:32

1

Не то, что я имел в виду, но работает отлично. Благодарю.
Shay 12 сен. 2017, в 09:30
0

@Shay Какая у тебя была идея поделиться этим. Мы также можем попробовать ваш метод.
weBBer 12 сен. 2017, в 09:35
0

Ваше решение шире, чем мой фрагмент, Это повлияет на элементы, другие, которые я намеревался.
Shay 12 сен. 2017, в 09:46
0

daypicker на самом деле это имя узла, а не имя класса.
Thomas 12 сен. 2017, в 09:57
0

@Shay changind .daypicker обратно в daypicker должен решить большинство из вас проблемы с кнопками. Если это не так, вы должны сохранить подробные определения кнопок, которые хотите выбрать. НО часть >table>tbody>tr>td> определенно устарела и может быть заменена простым пробелом .
Thomas 12 сен. 2017, в 10:01
0

@Thomas Вы хотите изменить это: Потому что я попробовал это, и это не сработало.
Shay 12 сен. 2017, в 11:53
0

@Shay просьба указать , какие элементы вы ориентируетесь в вашем Q мое первое решение работает именно то , что вы получите применяя свой фрагмент кода.
weBBer 12 сен. 2017, в 12:13
0

@weBer ваш код работает на всех кнопках в таблице, а не только на конкретные кнопки, как фрагмент в моем вопросе. Я хотел знать, пишу ли я более чистый код, чтобы делать то же самое.
Shay 12 сен. 2017, в 12:27
0

У @Shay во фрагменте вашего Q есть button.btn так что вы можете просто использовать мое первое предложение, и ваш результат будет таким же, если нет общего класса, тогда ваш метод хорош.
weBBer 12 сен. 2017, в 12:45
0

@weBar, который вы предлагаете, также влияет на следующий элемент: daypicker> table> tbody> tr> td> button.btn.btn-sm.btn-danger, но я не хочу использовать эту конкретную кнопку.
Shay 12 сен. 2017, в 12:54
0

@ Скажи, что ты должен был упомянуть об этом в своем Q bro. только тогда мы можем предложить лучший ответ для вас. Я обновлю свой ответ в соответствии с вашими потребностями.
weBBer 12 сен. 2017, в 13:07
0

@ Скажите, я обновил ответ для вас, если это было полезно, не забудьте проголосовать :)
weBBer 12 сен. 2017, в 13:21
0

@weBar большое спасибо. Я не могу голосовать, потому что я новичок в Stack Overflow и у меня недостаточно очков репутации.
Shay 12 сен. 2017, в 13:26
0

@ Скажи, что это братан. Рад, что смог помочь тебе. :)
weBBer 12 сен. 2017, в 13:37

Показать ещё 12 комментариев