Пользовательский CSS на основе свойства lang документа HTML - PullRequest
Новая
       127

Пользовательский CSS на основе свойства lang документа HTML

0 голосов
/ 22 февраля 2020

Что не так с этим 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].

Ответы [ 4 ]

3 голосов
/ 22 февраля 2020

Это может помочь, я думаю. 

<!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>
1 голос
/ 22 февраля 2020

Вы можете использовать подстановочный знак * для своих таблиц. Я использовал div для переноса с атрибутом lang для демонстрации. 

[lang=ar] .table * {
  font-weight: bold;
  color: red;
}

.table * {
  font-weight: normal;
}
<div lang="ar">
  <table class='table'>
    <th>Test</th>
    <tr>
      <td>Test</td>
    </tr>
  </table>
</div>


<div>
  <table class='table'>
    <th>Test</th>
    <tr>
      <td>Test</td>
    </tr>
  </table>
</div>
1 голос
/ 22 февраля 2020

Вы можете объявить CSS переменную только для арабского c и использовать его в своих правилах.

В начале вашего CSS, объявите переменную: 

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

В конце каждого затронутого правила (например, .cellAYFM) добавьте второе свойство стиля шрифта: 

font-style:var(--ArabicStyle);

Таким образом, вы можете избавиться от дополнительного правила Вы указали.

0 голосов
/ 22 февраля 2020

Спасибо за ваши ответы с вашими предложениями.

Я думаю, в конце концов, было бы лучше сделать это следующим образом: 

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

Я ценю, что не предоставил HTML данные для контекста.

Еще раз, спасибо за ваши предложения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...