Question

我正在尝试设置Auth0锁定控件的样式，但是我的样式没有被应用。

根据文档，我应该能够设置此控件的样式以匹配我的网站Lock: Customize the look and feel。

在自定义CSS前面添加一个正文密钥以获胜在CSS规范中

我已将此行添加到我的Less样式表中。

body #a0-lock.a0-theme-default .a0-panel {
    font-family: 'Open Sans', sans-serif;
}

但是我的样式没有应用，当我在Firefox中调试样式表时，我可以看到我的代码丢失了选择。

我如何赢得风格选择？如何设置Auth0锁定控件的样式？

如果重要的话，我正在运行一个ASP.Net MVC网站，我的Less转换为CSS。我使用的是Auth0锁定版本8.2。

Answer 1

确保您的css顺序也正确定义。根据{{3}}

Auth0 Lock将其CSS定义插入HTML的头节点文档，它在最后完成。所以，为了覆盖 Lock的主要样式必须在body节点中插入CSS，紧接着Auth0 Lock包含的标签定义：

这对我有用

<script src="http://cdn.auth0.com/js/lock-7.min.js"></script>
<link rel="stylesheet" href="custom.css"/>

然后在我的CSS中

body #a0-lock.a0-theme-default .a0-panel {
    background-color: greenyellow;
}

要更改单个元素的font-family，请使用更具体的选择器。例如。使用

更改锁定头的字体系列

body #a0-lock.a0-theme-default .a0-header h1 {
    font-family: 'Open Sans' !important;
}

要更改所有面板元素字体系列，请使用*，如下所示

body #a0-lock.a0-theme-default .a0-panel * {
    font-family: 'Open Sans' !important;
}

Answer 2

我能够使用更具体的选择器来解决问题。在我的问题中，我错过了完整选择器（*）

因此; body #a0-lock.a0-theme-default .a0-panel成了; body #a0-lock.a0-theme-default .a0-panel *

我发现获取完整选择器的最简单方法是调试正在运行的应用程序的样式。