Можно ли установить CSS для комбинированных классов? - PullRequest
Новая
       12

Можно ли установить CSS для комбинированных классов?

3 голосов
/ 29 января 2009

Скажите, у меня есть следующее: 

tr {
    background: #fff;
}

tr.even {
    background: #eee
}

tr.highlight {
    background: #fec;
}

Можно ли указать 4-й фон (#fea) вместо того, чтобы highlight просто перезаписать even? 

<tr class="even highlight">
  <!-- ... -->
</tr>

Как только CSS3 поддерживается, :nth-child может работать. Но что-нибудь еще доступно? 

tr { /* ... */ }

tr:nth-child(even) { /* ... */ }

tr.highlight { /* ... */ }

tr.highlight:nth-child(even) { /* ... */ }

Ответы [ 3 ]

14 голосов
/ 29 января 2009

Вы можете сделать это: 

tr.even.highlight { ... }

Хотя IE6 не известен.

2 голосов
/ 29 января 2009

Ключом к назначению нескольких классов является то, чтобы убедиться, что ваш CSS изящно деградирует во всех браузерах. В этом случае это было бы хорошим решением: 

tr.even.highlight { background:#fea }

В современных браузерах, которые распознают это, вы получите этот 4-й цвет, и он будет применен к: 

<tr class='even highlight'>
...
</tr>

Я думаю, что это работает даже в IE6.

0 голосов
/ 24 июля 2009

IE6 допускает комбинированные классы, но не определяет приоритеты по специфике. Под этим я подразумеваю, что если вы попытаетесь применить один и тот же атрибут стиля в нескольких классах, он будет применяться к элементу в том порядке, в котором классы перечислены в таблице стилей, а не по наследству применяемых классов.

Например,

, в этом случае текст будет выглядеть так, как ожидалось, т. Е. Пункт 2 выделен синим цветом: 

<html>
    <head>
        <style type="text/css">
            .style1 {
                color:red
            }
            .style1.selected {
                color:blue
            }
        </style>
    </head>
    <body>
        <p class="style1">paragraph 1</p>
        <p class="style1 selected">paragraph 2</p>
    </body>
</html>

однако, если порядок классов поменялся местами, как показано ниже, оба пункта 1 и 2 выделены красным цветом: 

<html>
    <head>
        <style type="text/css">
            .style1.selected {
                color:blue
            }
            .style1 {
                color:red
            }
        </style>
    </head>
    <body>
        <p class="style1">paragraph 1</p>
        <p class="style1 selected">paragraph 2</p>
    </body>
</html>

так что комбинированный класс применяется, как и исходный простой класс, то есть последний класс, которому соответствует элемент, является тем, который его стилизует, если классы применяют одни и те же атрибуты.

Итак, вы можете заставить ваши классы CSS вести себя так, как вы ожидаете, упорядочив их. Но это может работать не во всех случаях, в зависимости от того, как вы хотите применить классы. Единственный верный способ исправить это в IE6 - использовать javascript для добавления и удаления классов css для определенных событий, что немного неуклюже.

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

Нет похожих вопросов

...