Почему свойство наследования CSS перекрывает мой стиль? - PullRequest
Новая
       75

Почему свойство наследования CSS перекрывает мой стиль?

0 голосов
/ 25 декабря 2018

В следующем примере у меня есть стиль кнопки Bootstrap, который захватывается записью color: inherit, установленной .k-grid Kendo-UI: 

.k-grid a {
  color: inherit;
}
<div class="k-grid">
  <a class="btn btn-secondary" href="#">Button</a>
</div>

Демонстрация здесь: http://jsfiddle.net/aq9Laaew/299912/

Вы можете заметить, что свойство inherit .k-grid a обходит любые другие классы, передаваемые вa тег.В конце концов кнопка Bootstrap отображается с неверным цветом внутри таблицы кендо-сетки.

Как правильно это исправить?Я не уверен, что добавление !important к SASS Bootstrap является лучшим решением.

Ответы [ 3 ]

0 голосов
/ 25 декабря 2018

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

Для унаследованных свойств это усиливает поведение по умолчанию и требуется только для переопределения другого правила.

Это поможет вам: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance

Если вы хотите копать больше: https://developer.mozilla.org/en-US/docs/Web/CSS/inherit, https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value

0 голосов
/ 26 декабря 2018

Посмотрев на вашу скрипку, я вижу в инспекторе, что сброс Bootstrap применяет следующее: a:not([href]):not([tabindex]) {color: inherit;}

Кроме того, якорь в вашей скрипке не имеет href, так чтовышеупомянутый CSS применяется. 

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="k-grid">
  <a href="#" class="btn btn-secondary">Button</a>

  <a class="btn btn-secondary">Button</a>
</div>

Поэтому попытка стилизовать вашу кнопку (без href) с помощью: .btn-secondary {color: white;} не будет работать из-за специфичности CSS .

Если вы все еще не понимаете CSS-специфичность , найдите себе калькулятор специфичности, например этот , и вставьте оба селектора в него.

Вы обнаружите, что .btn-secondary недостаточно конкретен , чтобы переопределить это правило, исходящее из сброса Bootstrap, который применяет стили для вашей кнопки.

Учитывая, что kendo-ui также влияет на стили вашей кнопки с помощью: .k-grid a {color: inherit;}, лучший способ решить вашу проблему - нацелить кнопку с помощью (как вы уже догадались) селектора более высокой специфичности.

.k-grid a {
  color: inherit;
}

.btn.btn-secondary {
  color: white;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="k-grid">
  <a href="#" class="btn btn-secondary">Button</a>

  <a class="btn btn-secondary">Button</a>
</div>
0 голосов
/ 25 декабря 2018

Я рекомендую вам понять специфику css. Например: http://cssspecificity.com

В вашем случае .one-class менее специфичен, чем .on-class и элемент

...