1

あるページでは、'core' というプラグインをインストールし、次に page->template で、次のようにインライン 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;}。それで、typo3 のフロント ページに css はどのように適用されますか? どちらが優先度が高いですか？プラグイン css、inlincss...?

4

1 に答える 1

0

あなたが経験している振る舞いは、TYPO3 とは何の関係もありません。これは、CSS 標準 (短縮) の結果です。

要素の同じプロパティに複数のルールが適用される場合、より具体的なセレクターを持つルールが優先されます。ID を含むセレクターは優先順位が非常に高いため、含むルール#mainが使用されます。両方のルールが同等に具体的である場合 (ルールのセレクターを TypoScript から に変更したときに起こるように#main h1)、後で表示されるルールが使用されます。

ここでは、CSSの仕様について説明します。

于 2013-09-11T11:11:27.103 に答える