CSS 类未完全应用于 span 元素内的按钮

问题描述 投票:0回答:2

span中的样式部分不起作用。 我正在尝试在按钮上设置 CSS 组件。 总共有三个按钮,其中两个在我要求之前就已经存在了。 CSS 类已成功应用于这两个按钮,但不适用于我刚刚制作的唯一一个按钮。

  1. 这是代码。导致问题的按钮是第一个范围“信息按钮”。
<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>

  1. 样式为“button-navy”和“button-blue”,带有背景色标签。我尝试应用这两种类型,但它们不起作用。
  2. “信息按钮”和“搜索按钮”没有任何样式
  3. 我尝试了几次电源刷新,但似乎不起作用。

如果我检查了CSS的优先级,接下来我应该检查什么?

css angularjs
2个回答
0
投票

首先检查您是否正确链接了 css 文件。如果是,请尝试使用父类访问类。

例如:-

.buttons .button-navy .info-button{
   your stylings
}

或者您可以使用重要的关键字如下,

color:red!important;

-1
投票

是的,您可以使用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 值。

© www.soinside.com 2019 - 2024. All rights reserved.