Як ігнорувати батьківський стиль css

Question 1

Мені цікаво, як ігнорувати батьківський стиль та використовувати стиль за замовчуванням (жоден). Я покажу свій приклад як приклад, але я впевнений, що це загальне питання.

<style>
#elementId select {
    height:1em;
}
</style>

<div id="elementId">
    <select name="funTimes" style="" size="5">
        <option value="test1">fish</option>
        <option value="test2">eat</option>
        <option value="test3">cows</option>
    </select>
</div>

Я не хочу вирішувати цю проблему:

Я не можу редагувати таблицю стилів, де встановлено "#elementId select", мій модуль не матиме до нього доступу.
Бажано не перевизначати стиль висоти, використовуючи атрибут style.

Наприклад, використовуючи firebug, я можу вимкнути батьківський стиль, і все добре, це ефект, на який я йду.

Після встановлення стилю, чи можна його відключити чи замінити?

Question 2

Це має бути замінено. Ви можете використовувати:

<!-- Add a class name to override -->
<select name="funTimes" class="funTimes" size="5">

#elementId select.funTimes {
   /* Override styles here */
}

Переконайтеся, що ви використовуєте !importantпрапор у стилі css, наприклад margin-top: 0px !important Що означає! Важливе у CSS?

Ви можете використовувати селектор атрибутів, але оскільки це не підтримується застарілими браузерами (читайте IE6 тощо), краще додати назву класу

Question 3

Ви можете вимкнути його, перевизначивши його так:

висота: авто! важливо;

Question 4

Це потрапило вгору через редагування ... Відповіді стали трохи застарілими і не такими корисними сьогодні, як до стандарту було додано інше рішення.

Зараз існує скорочене властивість "все".

#elementId select.funTimes {
   all: initial;
}

Це встановлює для всіх властивостей css початкове значення ... зверніть увагу, що деякі початкові значення передаються у спадок; У результаті деяке форматування все ще відбувається на елементі.

Через цю паузу, необхідну під час читання коду або перегляду його в майбутньому, не використовуйте його, якщо тільки ви самі, оскільки процес перегляду є точкою, де можуть бути допущені помилки / помилки! при редагуванні сторінки. Але очевидно, що якщо існує велика кількість властивостей, які потрібно скинути, то "все" - це шлях.

Стандарт знаходиться тут: https://drafts.csswg.org/css-cascade/#all-shorthand

Question 5

Ви можете створити ще одне визначення в таблиці стилів CSS, яке в основному змінює початкове правило. Ви також можете додати "! важливо" до згаданого правила, щоб переконатися, що воно дотримується.

Question 6

Ви повинні використовувати це

висота: авто! важливо;

Question 7

У мене була подібна ситуація під час роботи на веб-сайті joomla.

Додано назву класу до модуля, на який це вплине. У вашому випадку:

<select name="funTimes" class="classname">

потім зробив наступну однорядкову зміну в css. Додано рядок

#elementId div.classname {style to be applied !important;}

добре працювали!

Question 8

Якщо я правильно зрозумів питання: ви можете використовувати autoв CSSтак width: auto;і вона буде повернутися до налаштувань за замовчуванням.

Question 9

Для CSS має сенс мати спосіб просто додати додатковий стиль (наприклад, у розділі заголовка вашої сторінки, який замінить зв’язану таблицю стилів), наприклад:

<head>
<style>
#elementId select {
    /* turn all styles off (no way to do this) */
}
</style>
</head>

і вимкнути всі раніше застосовані стилі, але це неможливо зробити . Вам доведеться перевизначити атрибут висоти та встановити для нього нове значення в головному розділі ваших сторінок.

<head>
<style>
#elementId select {
    height:1.5em;
}
</style>
</head>

Question 10

Будь ласка, див. Нижче машинопис для повторного застосування класу css знову до елемента, щоб замінити батьківський контейнер (зазвичай компонент фреймворку) стилі css та примусити власні стилі. Ваша програма програми (будь то angular / response), можливо, це робить, тому батьківський контейнер css був повторно застосований, і жоден з ваших очікуваних ефектів у css-class-name не відображається для вашого дочірнього елемента. Зателефонуйте this.overrideParentCssRule (childElement, ' css-class-name '); щоб зробити те, що щойно зробив фреймворк (викликайте це в document.ready або кінці обробника події):

      overrideParentCssRule(elem: HTMLElement, className: string) {
        let cssRules = this.getCSSStyle(className);
        for (let r: number = 0; r < cssRules.length; r++) {
          let rule: CSSStyleRule = cssRules[r];
          Object.keys(rule.style).forEach(s => {
            if (isNaN(Number(s)) && rule.style[s]) {
              elem.style[s] = rule.style[s];
            }
          });
        }
      }

Майк Чжен tradrejoe@gmail.com

Question 11

Існує купа значень, за допомогою яких можна скасувати правила CSS: початкове, скасування та повернення. Детальніше від робочої групи CSS на W3C:

https://drafts.csswg.org/css-cascade/#defaulting-keywords

Оскільки це `` чернетка '', не всі підтримуються повністю, але в більшості основних браузерів встановлені та встановлені початкові значення, функція повернення має меншу підтримку.