Как я могу заменить текст с помощью CSS для определенной кнопки с тем же классом - PullRequest
0 голосов
/ 01 апреля 2019

Существует ли CSS для замены определенной метки кнопки, даже если класс для 2 кнопок одинаков?

Обе кнопки находятся на разных страницах. Есть ли способ заменить метку, используя их текущую метку, например «Далее» или «Готово»?

Я попробовал ниже.Это сработало, но изменило метку для обеих кнопок.

.uiButton .label {visibility: hidden;}

.uiButton .label:after {content:'Submit';visibility: visible;position: fixed;}

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Вы не можете выбрать элемент HTML на основе его содержимого.

Вы МОЖЕТЕ выбрать на основе типа элемента, класса / идентификатора, атрибута или на основе родительского элемента.

<element id="thisID class="thisClass" attribute="thisAttribute>
 some conent
</element>

element {
 styles
}

#thisID {
 styles
}

.thisClass {
 styles
}
element[attribute="thisAttribute"] { 
  styles
}

Для этогодля работы с button вам нужно будет отключить ЗНАЧЕНИЕ, а не содержимое.

<button value="somethingUnique">Button Text</button>

button[value="somethingUnique"] { 
  your override styles
}

Лучше всего проверять всех родителей в цепочке, пока не найдете уникальный класс или идентификатор для выбора.,(многие страницы имеют что-то вроде <body id="contactus")

Затем используйте это, чтобы сделать кнопку уникальной.

#contactus .uiButton label {}
0 голосов
/ 01 апреля 2019

Вы должны добавить класс, чтобы различать кнопки.Это плохая практика - пытаться основывать свои CSS на содержании кнопок.Что, если формулировка немного изменится в будущем?Это сломало бы вашу css.

Редактировать: Я предполагал, что вы управляете html, но если вы этого не сделаете, более простым способом может быть использование nth-child или других селекторов для поиска ваших кнопок.Как, возможно, .buttonsContainer .uiButton:nth-child(2)

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...