Внутренний стиль не работает в этом HTML-коде? - PullRequest
Новая
       21

Внутренний стиль не работает в этом HTML-коде?

0 голосов
/ 09 октября 2018 
<html>
<head>
<style>
#1fineday {
    color:yellow;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="intro">
  <p id="1fineday">Hello World</p> 
</div>
</body>
</html>

Не должно ли "Hello World" быть желтым?Я не понимаю, почему внутренние стили CSS, которые я написал, не применяются.ID - это 1fineday.Я должен что-то упускать из виду.

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

В том, как вы пишете селекторы CSS с помощью символа #, есть техническая составляющая.Вы всегда можете написать селектор, чтобы использовать селектор атрибутов 

[id="1fineday"] {
    color:yellow;
}

, и вы увидите желтый текст.

Вы не можете написать #1fineday вселектор, потому что , как гласит официальная спецификация селектора CSS, :

Идентификационный атрибут языка документа позволяет авторам назначать идентификатор одному экземпляру элемента в дереве документа.,Селектор идентификатора содержит «знак числа» (U + 0023, #), за которым сразу следует значение идентификатора, которое должно быть идентификатором CSS.Селектор идентификатора представляет экземпляр элемента, который имеет идентификатор, совпадающий с идентификатором в селекторе идентификаторов.

Синтаксис для идентификаторов CSS приведен в официальной спецификации со следующими словами:

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание (_);они не могут начинаться с цифры, двух дефисов или дефиса, за которым следует цифра.Идентификаторы также могут содержать экранированные символы и любые символы ISO 10646 в виде числового кода (см. Следующий пункт).Например, идентификатор "B & W?"может быть написано как "B \ & W \?"или "B \ 26 W \ 3F".

Поэтому, если вы все еще хотите использовать #, вам придется использовать код выхода для числа 1: 

#\31 fineday {
    color:yellow;
}

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

0 голосов
/ 09 октября 2018

Из-за соглашения об именовании ваш id не может начинаться с цифры 

<html>

<head>
  <style>
    #fineday {
      color: yellow;
    }
  </style>
</head>

<body>
  <h1>Welcome</h1>
  <div class="intro">
    <p id="fineday">Hello World</p>
  </div>
</body>

</html>

Удалите число 1, и оно будет работать

Для справки:

W3Schools: https://www.w3schools.com/css/css_syntax.asp

CSS-хитрости: https://css -tricks.com / идентификаторы не могут начинаться с числа /

...