tag.class и .class: 2 сценария - PullRequest
       3

tag.class и .class: 2 сценария

0 голосов
/ 05 августа 2020

ПРОБЛЕМА РЕШЕНА. Огромное спасибо for@JHeth и @Marko Vucurovi c. Я очень признателен за вашу помощь!

Это длинный, но простой вопрос, давайте рассмотрим 2 сценария ios:

Сценарий I

<html>
<head><title>A</title>
<style>
.big {
font-size:300pt}
.small {
font-size:50pt}
</style>
</head>

<body>
<div class="big">
<div class="small"><a href="google.com">Hi</a>
</div>
</div>
</body>
<html>

Так как div малого класса является дочерний элемент div большого класса, шрифт всегда должен быть маленьким. И в этом случае оказывается, что шрифт маленький (50pt), что имеет смысл.

Если вы добавляете div в .big или .small в CSS (div.big и div.small), шрифт все еще мал.

Сценарий II

Интересная часть возникает, когда селектор CSS не «.small» и «.big», а «.small a» и «.big» a ":

<html>
<head><title>A</title>
<style>
.big a{
font-size:300pt}
.small a{
font-size:50pt}
</style>
</head>

<body>
<div class="big">
<div class="small"><a href="google.com">Hi</a>
</div>
</div>
</body>
<html>

Теперь шрифт маленький, когда вы добавляете div к обоим, шрифт все еще маленький. Но если добавить только div в .big, шрифт станет большим!

Это беспокоило меня 2 дня, и я зарегистрировал этот форум для этого. Любая помощь приветствуется.

Ответы [ 2 ]

1 голос
/ 06 августа 2020

Это ожидаемое поведение. Причина, по которой div.big a имеет приоритет над .small a, заключается в том, что он имеет более высокий уровень специфичности, вы можете узнать о нем больше здесь и посмотреть, как рассчитывается оценка здесь .

Поскольку в этом примере у вас есть только классы и селекторы элементов, расчет прост. Классы получают 10 баллов, а селекторы элементов - 1 балл.

Селекторы получат следующие баллы:

  • div.big a: 1 (div) + 10 (.big) + 1 ( а) = 12
  • .small a: 10 (. маленький) + 1 (а) = 11
0 голосов
/ 06 августа 2020

Речь идет о CSS специфичности селектора.

0 0 0 - поля для идентификатора, класса, элемента соответственно

div.big a

2 элемента 1 класс, так что это : 0 1 2

.small a

1 элемент класса 1, так что это: 0 1 1

Если вы сравните эти два, вы увидите этот первый более конкретный c

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...