Почему мой css не применяется?

У меня есть простой html-файл, который я хочу применить с помощью CSS для изменения внешнего вида, но css не применяется к моему контенту.Почему мой css не применяется?

Я знаю, что я должен, вероятно, поставить css во внешний файл, но сейчас я просто изучаю пример из книги.

Адрес: html. Может ли кто-нибудь помочь? Заранее благодарю!

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<style type="text/css"> 
    .content p{ 
     background-color:#C0C0C0; 
     padding: 3px; 
    } 
    .heading p{ 
     display: inline; 
     background-color:black; 
     color: white; 
     font-weight:bold; 
     padding:3px; 
    } 
</style> 
</head> 
<body> 
    <div id="heading"> 
     <p>Heading A</p> 
     <p>Heading B</p> 
     <p>Heading C</p> 
    </div> 
    <div id="content"> 
     <p>Paragraph A</p> 
     <p>Paragraph B</p> 
     <p>Paragraph C</p> 
    </div> 
</body> 
</html>

источник

2014-11-02 mitchj

'.heading' выбирает элементы с классом' heading'. Вы хотите, чтобы '# heading' выбирал элемент по id. – ptd

Вы применяете свой стиль к классу, а не к ID. Измените идентификатор в HTML на класс.

т.е. <div class="heading">

источник

2014-11-02 13:53:03 ascorbin

Спасибо! Я изменил «id» на «class», и теперь он работает. Спасибо за вклад каждого! – mitchj

.content p соответствует

<div class="content"> 
    <p>Paragraph A</p> 
    <p>Paragraph B</p> 
    <p>Paragraph C</p> 
</div>

то, что вы ищете являются: #content p

источник

2014-11-02 13:55:15

Ваш CSS должен быть

# = id. = class

из

.content p{ 
    background-color:#C0C0C0; 
    padding: 3px; 
} 
.heading p{ 
    display: inline; 
    background-color:black; 
    color: white; 
    font-weight:bold; 
    padding:3px; 
}

#content p{ 
    background-color:#C0C0C0; 
    padding: 3px; 
} 
#heading p{ 
    display: inline; 
    background-color:black; 
    color: white; 
    font-weight:bold; 
    padding:3px; 
}

Я хотел бы также добавить, что ids должен быть уникальным на странице, а это означает, что вы не можете иметь более одного элемента с тем же id, поэтому его почти всегда лучше использовать classes для стилизации.

источник

2014-11-02 13:55:19

Почему мой css не применяется?

ответ

Смежные вопросы