Добавленная проблема с управлением CSS

Ответ 1

Есть ли способ исправить эту ошибку, которую вы знаете?

Да, определите каждое соответствующее свойство внутри DIV и !important:

<div style="width: 300px !important; line-height: 1em !important....">

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

Ответ 2

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

Укажите атрибут стиля

Скажем, ваш контент выглядит следующим образом:

<div id="#cool-bookmarklet">Here is some content</div>

И ваш CSS выглядит так:

#cool-bookmarklet {
    color: #000000;
    font-size: 80%;
}

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

div {
    width: 70%;
    background-color: #000000;
}

У вас будут проблемы, потому что этот CSS применяется к вашему контенту (div). Ваш div "cool-bookmarklet" будет на 70% шириной его родителя и имеет черный цвет фона. Нехорошо.

Кроме того, размер шрифта является относительным значением, то есть он будет составлять 80% от унаследованного значения. Так что если размер шрифта, указанный на странице 10px, ваш шрифт будет 8px. Здесь, вероятно, лучше всего использовать явный размер, чтобы избежать проблем с наследуемыми стилями.

Вот как ваш CSS должен выглядеть так, чтобы избежать унаследованных стилей:

#cool-bookmarklet {
    color: #000000;
    font-size: 12px;
    width: 400px;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    font-weight: normal;
    /* etc, etc */
}

Специфичность

Там есть часть CSS, которую многие люди не учат (и мне потребовалось некоторое время, чтобы понять), и она назвала специфику. Специфика используется браузерами для определения того, какие стили CSS применяются к элементам, когда конфликтуют два селектора.

Из спецификации CSS:

Специфичность селектора вычисляется следующим образом (из spec):

• Граф 1, если объявление является атрибутом "style", а не правилом с селектором, 0 в противном случае (= a) (В HTML значения атрибута стиля "style" являются правилами таблицы стилей. нет селекторов, поэтому a = 1, b = 0, c = 0 и d = 0.)
• Подсчитайте количество атрибутов идентификатора в селекторе (= b)
• Подсчитайте количество других атрибутов и псевдоклассов в селекторе (= c)
• Подсчитайте количество имен элементов и псевдоэлементов в селекторе (= d)

Объединение четырех чисел a-b-c-d (в числовой системе с большой базой) дает специфичность.

Итак, a = стили в атрибуте style элемента html. b = селекторы id, c = имена и атрибуты классов, d = имена тегов. Селектор с наивысшей специфичностью "выигрывает", если два селектора нацелены на один и тот же элемент.

Это немного запутанно, но вы можете повесить его после нескольких попыток.

Скажем, у вас есть эти два правила в вашем CSS:

#cool-bookmarklet { color: red; }
div { color: blue; }

И содержимое:

<div id="cool-bookmarklet">Here is some content</div>

Селектор "# cool-bookmarklet" будет иметь специфичность 100 (a = 0, b = 1, c = 0, d = 0). Селектор "div" имеет специфичность 1 (a = 0, b = 0, c = 0, d = 1). "# cool-bookmarklet" выиграет, а div будет иметь красный текст.

Это актуально, потому что если ваш букмарклет вводит таблицу стилей для стилизации вашего контента, другой CSS на странице может переопределить его, если специфика выше. Часто бывает проще дать вашему контенту идентификатор (который имеет высокую специфичность "b" ). Это позволяет настроить таргетинг на ваш контент и не беспокоиться о переопределении других стилей.

Надеюсь, что это поможет!

Ответ 3

Я не полностью понимаю вопрос. Возможно, небольшой фрагмент поможет?

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