::在选择器不起作用之前

Question

我花了将近两个小时来弄清楚这个问题。谁能提供有关使 ::before 选择器起作用的任何见解？

相关CSS:

.reviewExcerpt p::after {
  content: "[=11=]A0.[=11=]A0.[=11=]A0.";
}
.5 p::before {
  content: "5 stars";
  font-family: 'Font Awesome';
  display:block;
}
.floatRight {
  float: right;
  display: block;
}
h3 {
  font-family: 'Raleway', script, Helvetica, sans-serif;
  font-size: 1.6em;
  line-height: 1em;
  margin: .8em 0 0;
  font-weight: 600;
  color: #555555;
}
h2 {
  font-family: 'Raleway', script, Helvetica, sans-serif;
  font-size: 1.9em;
  margin: .8em 0 .25em;
  font-weight: 600;
  color: #b565a7;
}
.centered {
  margin: 0 auto;
  text-align: center;  
}

JS fiddle: https://jsfiddle.net/k6y07r45/

代码显示 :: 在仅排列几行之后。

Answer 1

CSS 选择器（class [.] 或 ID [#]）不能以数字开头。

This SO 问题提供了一些关于所需语法的见解，如果你想探索的话。

我更新了您的 JS Fiddle，将您的 class .5 更改为 .a-5。您还应该考虑让您的 classes 更加语义化，让您和其他阅读您的复杂项目代码的人更加清晰。例如，rating 比 5 更有意义（更不用说有效了）。

现在还值得注意的是，::before 和::after 只能 select non-replaced elements。这不会影响您现在正在做的事情，但由于您正在试验，这是另一个需要记住的花絮。

::在选择器不起作用之前

::before selector not working

css

pseudo-element