无法在 css 中为导航栏徽标设置最大高度

问题描述

我正在尝试创建带有徽标的导航栏，但无法增加图像的大小。

这是用 kotlin/js 编写的，但原生 html/js 代码的概念应该相同。

HTML 索引文件：

fun HTML.index() {
  head {
    title("Welcome to Seller Service")
    link(rel = "stylesheet",href = "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.css") { }
    link(rel = "stylesheet",href = "static/styles/index.css") {}
  }
  body {
    div {
      id = "index"
    }
    script(src = "/static/output.js") {}
    script(src = "https://use.fontawesome.com/releases/v5.3.1/js/all.js") {}
  }
}

反应 kotlin/js 代码以用索引 id 替换 div：

  override fun RBuilder.render() {
    div(classes = "section") {
      div(classes = "container") {
        nav(classes = "navbar") {
          div(classes = "navbar-brand"){
            a(classes = "navbar-item"){
              img(classes = "img-style",src = "static/images/logo-text.png",alt = "Site logo") {
              }
            }
          }
        }
      }
    }
  }
}

从浏览器控制台看到的css：

.navbar-item img {
    max-height:1.75rem
}

.img-style {
    <strike>max-height:4rem;</strike>
}

max-height:4rem; 我的最大高度没有应用，知道为什么吗？

解决方法

它总体上由属性顺序控制。我通过在我的 css 中覆盖相同的规则并将其链接到页面来解决这个问题。

.navbar-item > img { max-height: 4rem; }

我覆盖了 navbar-item 类直接子 img 的这个规则。