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>

使用选择器时未应用样式

2 个答案: