Question

在一个页面中，我安装了一个名为＆＃39; core＆＃39;的插件，然后在page-＆gt;模板中，我输入了内联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

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

Answer 1

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

如果多个规则适用于元素的同一属性，则具有更具体选择器的规则优先。由于包含ID的选择器具有非常高的优先级，因此使用包含#main的规则。如果两个规则具有相同的特定性（当您将规则的选择器从TypoScript更改为#main h1时），则会使用稍后显示的规则。

这是introduction to CSS specifity。

错字3：css如何在系统中运行

1 个答案: