使用选择器时未应用样式答案

【问题标题】：Styles not being applied when use selectors使用选择器时未应用样式
【发布时间】：2019-07-30 15:47:41
【问题描述】：

我找不到解决方案 - 一切似乎都正确，我已尝试验证代码。没问题。当我将样式应用于每个<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>

【问题讨论】：

将“ 和” 替换为" 即可。
p#borderParagraph 没有意义。 # 标记唯一且必须唯一的 id
浏览器有时会将您的文件存储在缓存中，以便快速加载文件。您可能需要刷新以使缓存无效
@Banzay 在某种程度上，你是对的......但它应该可以工作（想想 LESS 或 SASS 代码p { color:blue; &#special { color:red; } }）
@Banzay p#borderParagraph 是完全可以接受的 CSS。如果标记中有更多具有相同id 的元素，那就另当别论了。

标签： html css class css-selectors

【解决方案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>

【讨论】：

谢谢！当然是我使用的文本编辑器。现在，如果我可以让它自动退出更改为智能引号......
这是另一个问题^^ 但你应该看看Javascript replace 函数。 str = str.replace(new RegExp('”', 'g'), '"')

【解决方案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>

【讨论】：

谢谢！还要感谢您的澄清 - 我知道我不一定需要前面的 p，但我不知道哪种方式更好。
你的第二点是不可能的，p#id 是非常规但有效的（p.class 非常有用，只获得 2 个字符）。在这种情况下，您还可以谈论 naming convention .border-paragraph 而不是驼峰式大小写，并且事件 .bordered 原因段落已经用 p.bordered 指定。一个好的 stackoverflow 答案应该一次只回答一个问题。
真实且点。我只是想帮助解释问题的答案，同时为（大概）新开发人员提供一些帮助，以帮助他们的代码更易于阅读、编写和使用。