代码之家 › 专栏 › 技术社区 › Noble-Surfer

CSS类似乎没有正确地继承/覆盖属性

inheritance css

Noble-Surfer · 技术社区 · 6 年前

该功能目前工作正常,但是,我现在想禁用这个'重置密码'按钮时,用户的帐户被锁定-因为管理员将不得不解锁帐户之前,他们可以重置密码,所以禁用'重置密码'按钮会给他们一个视觉提示,帐户需要解锁之前,密码可以重置。

“重置密码”按钮所属的按钮类型有一个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 .disabledpasswordresetbutton .mainsubmit CSS类?

0 回复 | 直到 6 年前

tom 6 年前

我不确定,但听起来你的选择器不匹配。尝试:

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

bkis 6 年前

.mainsubmit .disabledpasswordresetbutton )使它匹配类的所有元素 disabledpasswordresetbutton 是的类元素 mainsubmit 二者都

.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>

class 属性为 用空格分隔的类名 . 你只使用 . 在CSS选择器中。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

Mass · 如何在Tailwind CSS v4中创建配置

7 月前

magenta placenta · 将css变量合并为一个变量

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

7 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

7 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

7 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

7 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前