Специфичность и прямое нацеливание - PullRequest
Новая
       94

Специфичность и прямое нацеливание

0 голосов
/ 29 августа 2018

Я выполняю циклы между моим пониманием специфики и нацеливанием на элемент. Я понимаю базовую концепцию специфичности и читаю многочисленные статьи о том, как рассчитать специфичность, используя a, b, c, d, где d - это самая низкая специфичность, а a - самая высокая.

Я теряю сферу применения специфики. В приведенном ниже фрагменте, хотя некоторые правила специфичности "выше", чем другие, применяются более низкие специфичности, например, 

/* 0001 */

span {
  color: red;
}


/* 0001 */

p {
  color: blue;
}


/* 0010 */

.main {
  color: orange;
}


/* 0100 */

#h4-id {
  color: limegreen;
}


/* 0002 */

div h4 {
  color: purple;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body class='main'>
  <h3>this should be orange</h3>

  <div id='h4-id'>
    <h4>ID Selector</h4>
  </div>

  <p>
    text inside paragraph
    <span>hello world</span>
  </p>
</body>

</html>

Существует div с идентификатором h4-id. Правило устанавливает весь текст на салатовый.

Существует еще один селектор с более низкой специфичностью div h4, это правило «выигрывает» и применяются объявления в этом правиле.

Я считаю, что причина в том, что это "прямая" цель .

Вот еще один пример: 

  /* 0002 */

p span {
  /*     font-size: 200px; */
  text-decoration: underline dotted red;
  font-style: normal;
  color: teal;
  background-color: yellow;
}

/* 0001 */

span {
 background-color: teal;

}


/* 0010 */

.main {
  font-family: monospace;
  color: blue;
  font-size: 22px;
  background-color: lightgrey;
}


/*  0001 */

p {
  font-family: cursive;
  color: indigo;
  font-size: 100px;
  background-color: limegreen;
  font-style: italic;
  text-decoration: underline;
<p class='main'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <span>eiusmod tempor incididunt</span> ut Tristique magna sit amet purus gravida quis blandit turpis. Tellus elementum sagittis vitae et. Faucibus pulvinar <span>elementum integer enim neque</span>  volutpat ac tincidunt vitae. At tempor commodo ullamcorper a.
</p>https://stackoverflow.com/questions/ask#

В этом примере, опять же, побеждает более низкая специфичность, но это «прямые цели» (я считаю), именно поэтому они побеждают. Класс "main" не имеет более высокого приоритета по сравнению с селектором потомка p span.

  • оценка класса .main равна 10, ко всему тексту внутри него должен применяться набор правил, если только нет идентификатора
  • Селектор p span равен 2, причина, по которой он побеждает, заключается в том, что он непосредственно нацелен (даже если показатель специфичности ниже? Вот где моя путаница).

Вот один из многих типов статей и ссылок, которые я читал, чтобы укрепить мои знания о специфике

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

false, 0, 0, 0, 0 (false означает, что это не прямая цель, это также всегда может быть 1 или 0). Это правильное рассуждение?

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Во-первых, обратите внимание, что color является унаследованным свойством :

Если для элемента не указано значение для унаследованного свойства, элемент получает вычисленное значение этого свойства для своего родительского элемента.

Таким образом, если свойство color не применяется непосредственно к элементу, оно наследует свое значение от своего родителя.

Теперь взгляните на этот пример: 

/*Rule A*/
#divId {
  color: orange;
}

/*Rule B*/
.divClass {
  color: green;
}

/*Rule C*/
div {
  color: blue;
}
<div id="divId" class="divClass">
  div 1 (id="divId" class="divClass")
  <div class="divClass">
    div 2 (class="divClass")
    <div>
      div 3
      <span> and a span</span>
    </div>
  </div>
</div>

У нас есть 3 div с и span. Давайте разберемся, как каждый получает свой цвет:

  • Div 1 предназначен для правил A, B и C. Правило A обладает наивысшей специфичностью, поскольку использует селектор идентификатора.
  • Раздел 2 предназначен для правил B и C. Правило B имеет более высокую специфичность, поскольку использует селектор классов.
  • Div 3 предназначается только по правилу C.
  • Диапазон не является целевым для какого-либо правила CSS. Таким образом, он унаследует свой цвет от своего родителя, div 3.
0 голосов
/ 29 августа 2018

Я теряю сферу применения специфики

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

Специфичность не имеет значения при оценке стилей, применяемых к различным элементам , даже если этот стиль наследуется от предка.

Правильно ли сказать, что до применения правил специфичности и расчета специфичности, если элемент имеет прямую нацеленность, правила специфичности не применяются и прямая цель всегда имеет приоритет

Нет, я бы сказал, что это неправильно. Я бы не стал заключать фразу «непосредственно нацеленный» ... в некотором смысле все CSS-селекторы напрямую нацелены на набор элементов, однако некоторые свойства этого набора правил могут каскадно передаваться потомкам, например color. Унаследованные стили также не наследуют специфику от набора правил, из которого они произошли; в противном случае, чтобы изменить цвет дочернего элемента, вам придется каждый раз соответствовать или превосходить специфику.

Например, текст в следующем фрагменте кода красный, потому что #main (селектор) имеет более высокую специфичность, чем div (селектор), и стили применяются к тому же элементу : 

#main {
  color: red;
}

div {
  color: blue;
}
<div id="main">text</div>

Однако в следующем примере p выигрывает день, потому что селекторы влияют на различных элементов : 

#main {
  color: red;
}

p {
  color: blue;
}
<div id="main">
  <p>text</p>
</div>

Теперь возьмем этот последний пример и добавим новый, более конкретный селектор , который применяет цвет к p: 

#main {
  color: red;
}

p {
  color: blue;
}

#main p {
  color: green;
}
<div id="main">
  <p>text</p>
</div>

Текст теперь зеленый, потому что селектор #main p (0,1,0,1) выше селектора p (0,0,0,1) и оба селектора влияют на один и тот же элемент.

...