Как добавить внешний файл css в одну часть html-страницы? [Дубликат]

Вот реализация, использующая структуру данных с разделенными наборами (в частности, дизъюнктный лес), благодаря подсказке putstorm в слияющих множествах, которые имеют хотя бы один элемент в общий . Я использую сжатие пути для улучшения скорости (~ 5%); это не совсем необходимо (и это предотвращает find хвостом рекурсивный, что может замедлить работу). Обратите внимание, что я использую dict для представления непересекающегося леса; учитывая, что данные int s, массив также работал бы, хотя это может быть не намного быстрее.

def merge(data):
    parents = {}
    def find(i):
        j = parents.get(i, i)
        if j == i:
            return i
        k = find(j)
        if k != j:
            parents[i] = k
        return k
    for l in filter(None, data):
        parents.update(dict.fromkeys(map(find, l), find(l[0])))
    merged = {}
    for k, v in parents.items():
        merged.setdefault(find(v), []).append(k)
    return merged.values()

Этот подход сопоставим с другими лучшими алгоритмами тестов Rik.

54
задан SnareChops 26 July 2016 в 00:51
поделиться

4 ответа

UPDATE Поддержка этой функции была удалена. Пожалуйста, ищите другие варианты

Оригинальное сообщение:

Возможно, вам захочется взглянуть на облаченные стили; см. http://css-tricks.com/saving-the-day-with-scoped-css/ .

Основная идея -

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

Тем не менее, вы находитесь на грани кровопролития здесь с точки зрения поддержки браузера. См. http://caniuse.com/style-scoped .

. Один вариант - использовать iframe.

36
ответ дан SnareChops 16 August 2018 в 10:29
поделиться

Простым способом является добавление перед классом перед каждым селектором в файле css.

Я нахожу, что скрипт grunt может сделать это:

https: // github. ком / ericf / Грунт-CSS-селекторы

1
ответ дан Fancyoung 16 August 2018 в 10:29
поделиться

Просто оберните весь код css внутри селектора для родительского элемента, скажем, что это div с id из foo, вы сделали бы следующее:

div#foo{
//All your css
}

И преобразуйте его как less к css с помощью инструмента, подобного http://less2css.org/ , он будет добавлять правые селекторы. Обратите внимание, что вам нужно будет позаботиться о таких вещах, как @media и т. Д.

22
ответ дан Juan Cortés 16 August 2018 в 10:29
поделиться
  • 1
    Это также должно очень хорошо работать с SASS. – pkr298 21 August 2015 в 13:20
  • 2
    Вы должны потребовать от всех пользователей симулятора сделать то же самое, о чем говорится в комментариях к вопросу. – pete the pagan-gerbil 28 September 2015 в 11:59
  • 3
    Спасибо, это был отличный вариант. Он даже относится к вопросу OP, пользователю css просто нужно будет предварительно обработать снова таким же образом. – bucabay 15 February 2017 в 14:07

При написании этого, команда <style scoped> устарела командой Chrome. В результате я экспериментировал с некоторыми подходами и выпустил https://github.com/thgreasi/jquery.scopeLinkTags . Примечание. Вы должны использовать этот подход только в том случае, если вы не можете управлять импортированным файлом CSS. Если вы можете использовать SASS / LESS / anything для предварительной обработки вашего CSS, вы должны это предпочесть.

2
ответ дан Thodoris Greasidis 16 August 2018 в 10:29
поделиться