Блог

Главная - Вопросы по программированию - Правильно ли я использую селектор идентификаторов CSS?

Правильно ли я использую селектор идентификаторов CSS?

#css

#css

Вопрос:

Я думаю, что, возможно, я не понимаю «идентификаторы» и классы в CSS. В следующем примере я просто пытаюсь настроить способ отображения отдельного изображения. Я попытался просто создать пользовательский идентификатор для этого изображения, а затем в CSS добавить соответствующие теги.

CSS, который я написал, не применяется к изображению.

И, кстати, могу ли я создать пользовательский идентификатор в CSS, просто выполнив <id> вместо <p id> ?

 <!DOCTYPE html>
<head>
<style>
#mypicture {
  outline-color: red; 
  border-radius: 40px;
}
</style>
</head>

<body>
  <header>
    <p id="mypicture"><img src="assets/ben.jpg"></p>
    <h1>Bens's Blog</h1>
    <ul>
      <li><a href="#">About Me</a></li>
      <li><a href="#">Best Poems</a></li>
      <li><a href="#">Worst Poems</a></li>
    </ul>
  </header>
</body>

Комментарии:

1. Да, вы используете его правильно. Если вы хотите, чтобы правило CSS было более конкретным, вы можете изменить его на p#mypicture В этом случае вы должны применять CSS к самому изображению, а не к тегу абзаца.

2. В вашем скрипте вы меняете абзац вместо img (я думаю, что вы хотите применить стиль к самому изображению).

3. В вопросе не описывается, как следует повлиять на рендеринг изображения, и опубликованный код не включает никаких настроек, которые применялись бы к img элементу.

Ответ №1:

Вы применяете свой CSS к тегу paragraph <p> . Вы хотите, чтобы это соответствовало вашему текущему DOM: 

 #mypicture img {
  outline-color : red; 
  border-radius : 40px;
}

Ответ №2:

Лучший набор правил — это:

 #mypicture > img {
    outline-color: red; 
    border-radius: 40px;
}

мое изображение — это абзац, и вы хотите, чтобы стили были применены к изображению внутри абзаца.

Ответ №3:

Попробуйте применить идентификатор непосредственно к изображению:

 <p><img src="assets/ben.jpg" id="mypicture"></p>

Ответ №4:

Значение по умолчанию для outline-style равно none . Итак, одной настройки цвета недостаточно для отображения контура. Попробуйте установить outline-style: solid; . Вокруг абзаца будет обведен квадратный контур.

Поскольку вы также настраиваете border-radius , это заставляет меня задуматься, не собираетесь ли вы закруглить углы изображения. Если это так, вам следует применить стили к изображению, а не к абзацу. Если вы хотите, чтобы контур также был округлен, используйте border вместо outline .

Ответ №5:

Я бы просто (в строке 13) исключил блоки абзацев и поместил идентификатор в объявление изображения.

 <img src="assets/ben.jpg" id="mypicture">