css - 更改另一个 div div 内 div 的边框颜色
问题描述
我得到了这个 Vue 组件(https://www.vue2editor.com):
<vue-editor id="description" name="description"
:class="{'uk-form-danger': errors.has('description') }"
v-model="description"
:editorToolbar="customToolbar" v-validate="'required'">
</vue-editor>
它呈现以下 HTML 标记:
<div class="quillWrapper" name="description" aria-required="true" aria-invalid="false">
<div class="ql-toolbar ql-snow"><span class="ql-formats"></span></div>
<div id="description" class="ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true"><p><br></p></div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a>
<input
type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
<a
class="ql-action"></a><a class="ql-remove"></a></div>
</div>
</div>
现在我想将类uk-form-danger
(比较https://getuikit.com/docs/form#states-modifiers)添加到父 div。
正如你所看到的,我通过在错误中绑定类来做到这一点。
出色地。问题是:uk-form-danger
该类没有向文本编辑器添加红色边框颜色。
这些是 css 的.ql-toolbar.ql-snow
:
.ql-toolbar.ql-snow {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
padding: 8px;
这是 uk-form-danger 的 css:
*
* Error
*/
.uk-form-danger,
.uk-form-danger:focus {
color: #f0506e;
border-color: #f0506e;
}
我可以通过向我的项目添加自定义 scss 来编辑 css - 但我应该在那里添加什么?
谢谢你的支持 :-)
解决方案
这里的问题与CSS 的特殊性有关——.ql-toolbar.ql-snow
它是一个比类更“强大”的选择器.uk-form-danger
。
自定义 SCSS 的最快修复方法是将!important;
属性添加到错误样式中,因此您的自定义代码可能如下所示:
.uk-form-danger {
border-color: #f0506e !important;
}
推荐阅读
- python - 在 MapBox 静态图像 API 调用期间重新着色多个图层?
- javascript - 元素不会在用户滚动时淡入
- java - 创建名为“resourceHandlerMapping”的bean时出错[org/springframework/web/servlet/config/annotation/DelegatingWebMvcConfiguration.class]
- tortoisegit - Compare with BASE vs. WORKING TREE 有什么区别?
- apache-spark - 无法将火花数据帧写入 gcs 存储桶
- angularjs - 无法从状态 ' ' 解析。我放错了什么配置?
- javascript - 为什么我的 if 语句没有显示在我的网站上?
- reactjs - 找不到reactjs的nginx位置404
- cocoa - 在 NSTableCellView 中时,边框不会在 NSView 中绘制
- php - 如何查找 Laravel 的哪个版本不再存在安全漏洞