span中的样式部分不起作用。 我正在尝试在按钮上设置 CSS 组件。 总共有三个按钮,其中两个在我要求之前就已经存在了。 CSS 类已成功应用于这两个按钮,但不适用于我刚刚制作的唯一一个按钮。
<div class="buttons">
***<span class="button-navy">
<button type="button" class="info-button">안내</button>
</span>***
<span class="button-navy">
<button type="button" class="search-button" ng-disabled="!ctrl.displayed || ctrl.displayed.length == 0" ng-click="ctrl.printOut()">출력</button>
</span>
<span class="button-blue">
<button type="button" class="search-button" ng-click="ctrl.reloadl()">새로고침</button>
</span>
</div>
如果我检查了CSS的优先级,接下来我应该检查什么?
首先检查您是否正确链接了 css 文件。如果是,请尝试使用父类访问类。
例如:-
.buttons .button-navy .info-button{
your stylings
}
或者您可以使用重要的关键字如下,
color:red!important;
是的,您可以使用background-clip属性和rgba颜色值来实现这种效果。关键是为 element1 的背景使用 rgba 颜色,并具有所需的颜色和与 element2 相同的 alpha 值。这样,element1 的颜色将被保留,并且只有它的不透明度会受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.element2 {
background-color: rgba(255, 0, 0, 0.8); /* Semi-transparent red background */
padding: 20px;
}
.element1 {
background-color: rgba(0, 0, 255, 0.8); /* Semi-transparent blue background */
padding: 10px;
/* Use background-clip to only apply the background within the padding box */
background-clip: padding-box;
}
</style>
</head>
<body>
<div class="element2">
<div class="element1">
Content of element1
</div>
Other content of element2
</div>
</body>
</html>
在此示例中,element2 具有半透明红色背景,element1 具有半透明蓝色背景。背景剪辑:padding-box;属性确保背景仅应用于 element1 的填充框内,允许内容拥有自己的颜色,同时继承父级的不透明度。根据您的具体设计需要调整颜色和 alpha 值。