在css中设置多个段落样式

Question

这是一个顶级问题，更多的是基于我对 css 的无知。我正在尝试在 css 中创建两种段落样式，一种字体大小为 20px，另一种字体大小为 14px。但是，无论我做什么，字体都是一样的。附件是我现在正在做的一个例子，如果有人能指出我的解决方案，我将不胜感激。为简洁起见，我省略了不必要的代码。

html 代码如下所示

<p>This is the html section with 20 px font</p>

<p class="new_font"> This is the html section with 8px font</p>
/* I have also tried this with a <div class="new_font"> and and <p id="new_font>"*/

css 代码如下所示

p {
     /*text-indent: 1.5em;*/
     font: 20px Helvetica, Sans-Serif;
     color: white;
     overflow: hidden;
     padding: 15px;
     text-align: justify;
     background: rgb(0, 0, 0,0.3); /* fallback color */
     background: rgba(0, 0, 0, 0.7);
}
p new_font {
     /*text-indent: 1.5em;*/
     font: 14px Helvetica, Sans-Serif;
     color: white;
     overflow: hidden;
     padding: 15px;
     text-align: justify;
     background: rgb(0, 0, 0,0.3); /* fallback color */
     background: rgba(0, 0, 0, 0.7);
} 

Answer 1

你的 CSS 无效，这就是它不适用的原因：

p new_font {
   /* ... */
}

应该写成

p.new_font {
   /* ... */
}

p new_font 在英文中读作“选择驻留在p 标记内的所有new_font 标记”。

p.new_font 在英文中读作“选择所有类属性设置为new_font 的p 标签”

Answer 2

小提琴：http://jsfiddle.net/AtheistP3ace/dh9av5jj/

你想把p new_font变成p.new_font。

p new_font 表示其中有一个带有 new_font 元素的段落。 new_font 不是元素类型。

p .new_font 说有一个段落，里面有一个类 new_font 的元素。

但是你在段落中有 new_font 类，所以选择器是：

p.new_font 表示我有一个带有 new_font 类的段落。

Answer 3

您只是缺少 CSS 中的类点声明。

如果您在 CSS 中引用类，则为 .，否则如果您引用 ID，则为 #。

p {
    /*text-indent: 1.5em;*/
    font: 20px Helvetica, Sans-Serif;
    color: white;
    overflow: hidden;
    padding: 15px;
    text-align: justify;
    background: rgb(0, 0, 0,0.3); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
}
p.new_font {
    /*text-indent: 1.5em;*/
    font: 14px Helvetica, Sans-Serif;
    color: white;
    overflow: hidden;
    padding: 15px;
    text-align: justify;
    background: rgb(0, 0, 0,0.3); /* fallback color */
    background: rgba(0, 0, 0, 0.7);
}