基于HTML文档lang属性的自定义CSS

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

此CSS有什么问题?

/* Arabic — Switch off Italic because the internal HTML viewer can't display the characters */
[lang=ar] .cellAYFM, .cellCBS, .cellHEADING, .cellLAC, .cellOtherHeading, .cellTFGW, .cellWEEKEND {
    font-style: normal;
}

如果HTML文档设置为“ ar”,我想做一些自定义样式。但是无论我为文档使用什么lang属性,它都将被应用。

我已使用以上语法在文件中确定table元素的样式,但不适用于td元素。

更新

如果我使用:

[lang=ar] .cellAYFM, [lang=ar] .cellAYFM, [lang=ar] .cellAYFM, [lang=ar] .cellCBS, [lang=ar] .cellHEADING, [lang=ar] .cellLAC, [lang=ar] .cellOtherHeading, [lang=ar] .cellTFGW, [lang=ar] .cellWEEKEND {
    font-style: normal;
}

有效。我只是希望不必以某种方式重复[lang=ar]

css lang arabic-support
2个回答
2
投票

这可能有助于我猜测。

<!DOCTYPE html>
<html>
<head>
<style>
.my-table .cell-heading:lang(it) { 
  background: yellow;
}


</style>
</head>
<body>

<table class="my-table" lang="it">
<tr class="cell-heading"><th>head1</th><th>head2</th></tr>
<tr><td>1</td><td>1</td></tr>
</table>
</body>
</html>

0
投票

您只能为阿拉伯语声明CSS变量并在您的规则中使用它。

在CSS的开头,声明变量:

html[lang="ar"] {
  --ArabicStyle: normal;
}

在每个受影响的规则的末尾(例如.cellAYFM),添加第二个字体样式属性:

font-style:var(--ArabicStyle);

这样,您可以摆脱指定的额外规则。

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