Как мне создать CSS-класс Union? - PullRequest
Новая
       3

Как мне создать CSS-класс Union?

1 голос
/ 03 ноября 2010

У меня есть div, который объединяет CSS-классы как таковые: 

    <div id="tp" class="ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
        ...
    </div>

Как мне создать стиль CSS, чтобы я мог объединить все эти классы вместе в один класс с дискретным именем?

пример: 

<div class="myCustomClass">
...
<div>

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

Заранее спасибо за чтение моего вопроса!

Ответы [ 3 ]

5 голосов
/ 03 ноября 2010

AFAIK, что невозможно в CSS. Вы можете передать правила нескольким селекторам: 

.one, .two, .three { color:red; }

Или вручную добавьте универсальный класс к каждому элементу HTML.

Если вы хотите нацеливать элементы, которые имеют определенные классы, вы можете сделать .one.two.three {}

1 голос
/ 03 ноября 2010

Вы можете попробовать использовать что-то вроде LESS или SCSS для реализации повторно используемых элементов этих классов в mixins .Обратите внимание, что вам не нужно использовать ни один из них в приложении ruby;Есть несколько портов LESS в PHP, JavaScript и .NET и SCSS, которые вы можете запускать автономно (но для работы потребуется ruby)

0 голосов
/ 03 ноября 2010

Я думаю, что вы смотрите на проблему задом наперед. Если все эти классы имеют одинаковые правила CSS, связанные с ними, вам следует просто объединить эти правила в своей таблице стилей. Однако я думаю, что в конечном итоге вы найдете, как комментирует Джейсон МакКрири, что это приведет к меньшей гибкости и большей работе.

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

.ui-tablepicker td a {/* some style */}

Но тогда будут другие правила, подобные этому: 

.ui-widget-content a {/*some other style*/}

Если вы хотите объединить эти имена классов, вы получите что-то вроде этого: 

.myCustomClass1 a {/* Replaces case where only .ui-tablepicker parent exists */}
.myCustomClass1 td a {/* Replaces case where only .ui-tablepicker parent exists */}
.myCustomClass2 a {/* Replaces case where only .ui-widget-content parent exists */}
.myCustomClass2 td a {/* Replaces case where only .ui-widget-content parent exists */}
.myCustomClass3 a {/* Replaces case where both exist */}
.myCustomClass3 td a {/* Replaces case where both exist */}

Разделение имен классов позволяет управлять таблицей стилей.

Если вам все время приходится вводить все эти классы, используйте переменную для хранения их в коде генерации вашей страницы, например: 

<?
$myCustomClass = "ui-hidden-on-load ui-tablepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible";
?>
<div id="tp1" class="<? echo $myCustomClass; ?>">
    ...
<div id="tp2" class="<? echo $myCustomClass; ?>">
...