2012-02-24 2 views
0

Мне нужно включить css-файл на мою веб-страницу, но проблема в том, что он должен соответствовать только определенному div. Пример:Инструмент для создания css-файла соответствует только определенному id

Нормальный CSS-файл:

#main td { 
padding:20px; 
} 

Дополнительный CSS-файл:

.myclass td { 
padding:0px; 
} 

Html:

<div id="main"> 
    <table><tr><td>TD with padding 20px</td></tr></table> 
    <div id="inside" class="myclass"> 
     <table><tr><td>TD which should have with padding 0px, but get padding 20px; </td></tr></table> 
</div> 

Это только упрощенный пример - в действительности, дополнительный css-файл очень длинный и сложный (мне нужно включить tinymce, но css-определения здесь сделаны только класс и поэтому переопределяется «нормальным» css-файлом).

Мой вопрос: есть ли инструмент (возможно, на PHP?), Который может изменить дополнительный css-файл для работы только по специальному идентификатору? В примере, он должен изменить все записи в дополнительной CSS-файл:

#inside .myclass td { 
    padding:0px; 
    } 

и выхода, конечно, CSS-файл с действительным синтаксисом.

+0

Почему вы не можете просто изменить файл CSS? –

+0

Наверное, у него большой файл css :) – tftd

+0

;-) Да, он большой, и это сторонний, поэтому его нужно обновлять/менять каждые несколько месяцев. – Werner

ответ

1

Вы можете использовать SASS. Она написана в рубин вместо PHP, но он легко может сделать то, что вы хотите использовать вложенные правила:

#inside{ 
    .myclass td { 
    padding: 0; 
    } 
} 

будет компилировать:

#inside .myclass td { 
    padding: 0; 
} 

префикс каждый селектор в данном файле вы можете использовать nested import, как в следующем примере:

/* File vendor.scss */ 
.myclass td { 
    padding: 0; 
} 

Ваш файл импорта:

/* File main.scss */ 
#inside { 
    @import "vendor"; 
} 

Это даст тот же результат, что и пример выше.

Обратите внимание, что при использовании вложенного импорта ваш импортированный файл должен быть .scss файлом.

+0

Это звучит интересно. Не могли бы вы дать мне подсказку, что искать «добавить» id перед всеми css-определениями в файле? Вложенные правила кажутся более «компактными» css, а не ограничением css-файла специальной областью. – Werner

+0

@Werner: Я обновил свой ответ с информацией о том, как префикс каждого селектора в заданном файле – raphinesse

0

Мне нравится находить и заменять регулярными выражениями. Просто замените:

^[^{]+ 

с:

#inside $0 

. Он работает на Notepad ++, по крайней мере.

+0

Я полностью потерян. Пожалуйста, объясни! – Jawad

+0

@Jawad: Это найти и заменить. В вашем любимом текстовом редакторе. Он использует регулярные выражения. Погугли это. – Ryan

+0

На да да. Лол. И для движения там я думал, что у нас есть новые комбинаторы в CSS Selectors. Приветствия. – Jawad

0

Любопытно, вы пробовали применить класс к тегу TD? Или, установив определение как .myclass TABLE TR TD?

Смежные вопросы