Как применить css внутри значений Label

#html #css #reactjs

#HTML #css #reactjs

Вопрос:

У меня есть <label> , который содержит несколько значений, таких как `

 label = {Student[name]    '('   "20"   ')'}

Теперь, как я могу предоставить некоторые marginLeft: '2rem' для второго значения label, т.е.

'(' "20" ')' в той же метке.

1. Поместите диапазон с классом для этих значений везде, где вы хотите, чтобы marginLeft затем добавлял marginLeft: '2rem' к этому классу resp!

2. Знаете ли вы о дочерних селекторах в CSS? Вы можете использовать n-й дочерний элемент и настроить таргетинг на

3. Вы могли бы добавить промежутки без классов вокруг значений. И добавьте поле для всех дочерних элементов. Затем вы можете переопределить поле слева от первого диапазона, установив для параметра first-of-type значение margin-left 0; .

4. @AniruddhaShevle label = {Student[name] ( <span style={{ marginLeft: '2rem' }}> 20</span> )} , это дает мне [object object] понять, как это исправить? Спасибо

Ответ №1:

Сделайте так, чтобы содержимое вашей метки стало чем-то вроде:

 label = '<span>'   {Student[name]    '('   "20"   ')'   '</span>'}

А затем в вашем css сделайте что-то вроде:

 .my-wrapper > span {
    margin-left: 2rem;
}

.my-wrapper > span:first-of-type {
    margin-left: 0;
}

Я думаю, это должно сработать. Замените .my-wrapper любым универсальным родительским селектором.

Обновить:
Или в одном операторе:

 .my-wrapper > span:not(:first-of-type) {
    margin-left: 2rem;
}

Ответ №2:

вы можете поставить id =»label» для своей метки и в css writ

  #label{margin-left:2rem}

1. Это не сработает, потому что идентификаторы должны быть уникальными для каждого html-документа. OP хочет добавить поле для каждого ученика в ярлыке, кроме первого. Таким образом, будет несколько элементов. Идентификатор не должен использоваться, потому что в этом случае он не может быть уникальным. И в любом случае в этом случае не должно быть необходимости добавлять идентификатор.

Ответ №3:

Используя ответ qvotaxon.

 label = '<span class="myClz">'   {Student[name]    '('   "20"   ')'   '</span>'}

.myClz:not(:first-child) {
     margin-left: 2rem;
}