Класс CSS, похоже, неправильно наследует / перезаписывает свойства

Question

Я работаю над функцией «сброса пароля» для приложения VB.net, где пользователь-администратор может сбросить пароль для пользователя, когда он забыл свой пароль.

Функция в настоящее время работаетправильно, однако, теперь я хочу отключить эту кнопку «сбросить пароль», когда учетная запись пользователя заблокирована - поскольку администратору придется разблокировать учетную запись, прежде чем они смогут сбросить пароль, поэтому отключение кнопки «сбросить пароль» даст им визуальныйзапрос, что учетная запись должна быть разблокирована, прежде чем пароль может быть сброшен.

Существует класс CSS для типа кнопки, который называется кнопкой "сбросить пароль", называется mainsubmit, и я хочу наследоватьиз этого класса, чтобы создать один для кнопки «отключенный сброс пароля».

CSS в настоящее время:

.mainsubmit {
    padding: 6px;
    font-size: 2.4em;
    width: 100%;
}

и чуть ниже я добавил:

.mainsubmit .disabledpasswordresetbutton {
    pointer-events: none;
    opacity: 0.5;
}

В VB у меня есть:

If lockedOutUser.IsLockedOut Then
    btnResetPassword.Enabled = False
    btnResetPassword.CssClass = "mainsubmit.disabledpasswordresetbutton"
End If

Однако, когда я сейчас просматриваю приложение в браузере, если учетная запись пользователя заблокирована, «сброс пароля», ноТон правильно выделен серым, но, похоже, он не унаследовал другие свойства CSS-класса mainsubmit - по некоторым причинам он намного меньше, чем другие mainsubmit кнопки, также отображаемые на этой странице.

Почему кнопка, принадлежащая .mainsubmit .disabledpasswordresetbutton, не унаследовала размер и другие атрибуты от класса .mainsubmit CSS?

Answer 1

Как я уже сказал в своем комментарии: пробел в вашем селекторе CSS (.mainsubmit .disabledpasswordresetbutton) позволяет ему соответствовать всем элементам класса disabledpasswordresetbutton, которые являются потомками элементов класса mainsubmit.Может быть, это не то, что вы хотите.Если вы удалите это пространство, оно будет соответствовать всем элементам, которые содержат оба класса (как в вашем VB-коде):

.mainsubmit {
  padding: 6px;
  font-size: 2.4em;
  width: 100%;
}

.mainsubmit.disabledpasswordresetbutton {
  pointer-events: none;
  opacity: 0.5;
}

<button type="button" class="mainsubmit">Enabled</button>
<button type="button" class="mainsubmit disabledpasswordresetbutton">Disabled</button>

РЕДАКТИРОВАТЬ: Кроме того, как указано в комментариях @MrLister, HTML-нотация для добавления нескольких классов с помощью атрибута class представляет собой имена классовразделенные пробелами .Вы используете только . в селекторах CSS.

Answer 2

Я не уверен, но похоже, что ваш селектор не соответствует.попробуй:

.mainsubmit.disabledpasswordresetbutton {
    pointer-events: none;
    opacity: 0.5;
}