CSS класс не применяет стиль

Question

Что касается первого правила CSS, оно работает, когда я использую только тег 'p'. Когда я применяю класс article с тегом p или без него, он не работает. Это почему? Также работает тег 'hr' с классом 'one' (что означает, что CSS файл работает). Это похоже на базовое c. Я не понимаю, почему это не работает. Есть идеи?

HTML

<p class=article>{{ post.body|truncatewords:30|linebreaks }}</p>

- Также пробовал

<p class="article">{{ post.body|truncatewords:30|linebreaks }}</p>

внешний CSS файл

p.article { 
    color:red; 
}

hr.one {
    border:none;
    height: 2px;
    background: #cec4c4;
}

HTML Выход

<div>

        <h1 class=display-4><a href="/blog/2020/5/28/gdddsasddsg/">gdddsasddsg</a></h1>

        <h6><span class="font-italic font-weight-normal">By: </span>gdorman619&nbsp;&nbsp;<span
                class="font-italic font-weight-normal">Published Date: </span> May 28, 2020, 12:24 p.m.</h6>

        <p class="article"><p>sdadfsdsfdsfa</p></p>

        <hr class="one">

    </div>

Answer 1

Вы печатаете контент из WYSIWYG-редактора или из чего-то другого, кроме чистой строки? В этом случае этот контент, вероятно, будет применять свою собственную разметку как встроенный HTML, а внешний css не будет работать, поскольку встроенный CSS внутри HTML имеет более высокую специфичность, чем CSS, помещенный во внешнюю таблицу стилей, если вы не примените к цвету !important, что заставляет меня съеживаться от моего имени.

Answer 2

Попробуйте с этим css.

.article { 
    color:red; 
}

.one {
    border:none;
    height: 2px;
    background: #cec4c4;
}

это может вам помочь

Answer 3

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

<p class="article"> Your code here</p>

Надеюсь, это поможет