使用选择器时未应用样式

Question

我找不到解决方案 - 一切看似正确，我已经尝试验证代码。没问题。当我将样式应用到每个<p>（没有选择器）时，它显示正常。当我使用选择器时，什么都没有。当我将选择器移动到<style>标签的顶部时，所有样式都会消失。很明显我错过了一些东西，这些选择器在某种程度上是错误的。有帮助吗？

p.indented{
  margin-left: 3em;
}

p#borderParagraph{
  border: 6px double black; 
  border-radius: 20px; 
  text-align: center; 
  padding: .75em;
}

<p class=“indented”>Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<p id=“borderParagraph”>Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

Answer 1

这是因为你使用”而不是"或'

<style>
        p.indented{
            margin-left: 3em;
        }

        p#borderParagraph{
            border: 6px double black; 
            border-radius: 20px; 
            text-align: center; 
            padding: .75em;
        }
    </style>

    <h3>Works</h3>
    <p class="indented">Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <p id='borderParagraph'>Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>

     <h3>Not working</h3>
    
    <p class=”indented”>Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Answer 2

正如已经指出的那样，你只需要使用常规引号"或' - 而不是某些文字处理器使用的“智能”引号。

此外，您的CSS选择器可以简化。您不需要同时指定元素和选择器，只需选择器就足够了，除非您对同一个类的特定需求在不同元素上看起来不同。通常不建议这样做。

.indented {
  margin-left: 3em;
}

#borderParagraph {
  border: 6px double black;
  border-radius: 20px;
  text-align: center;
  padding: .75em;
}

<p class="indented">Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<p id="borderParagraph">Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consquat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>