typo3 - 错字3：css在系统中是如何工作的

Question

在一个页面中，我安装了一个名为“core”的插件，然后在页面->模板中，我放置了内联 css，如下所示：

[global]
[globalVar= TSFE:id=159]
page {
  CSS_inlineStyle (  
.tx-core-pi1 .intro h1 {
     border-bottom: 1px solid #fff;
  })
}

但是在首页，它被覆盖了

#main h1{border-bottom: 1px solid #EA9E2A;}

此配置： #main h1位于此文件中：fileadmin/templates/template1/styles.css

如果我更改.tx-core-pi1 .intro h1为#main h1in ts 设置，那么它将正常工作，它将覆盖#main h1{border-bottom: 1px solid #EA9E2A;}，那么 css 如何应用于typo3中的首页？哪个优先级更高？插件css，inlincss ...？

Answer 1

您遇到的行为与 TYPO3 无关。它来自 CSS 标准（缩短）：

如果多个规则适用于元素的同一属性，则具有更具体选择器的规则优先。由于包含 ID 的选择器具有非常高的优先级，因此#main使用了包含的规则。如果两个规则同样具体（当您将规则的选择器从 TypoScript 更改为 时会发生这种情况#main h1），则使用后面出现的规则。

这是对 CSS 特殊性的介绍。