::选择器不工作之前

时间:2015-03-22 06:10:01

标签: css pseudo-element

我花了差不多两个小时试图解决这个问题。任何人都可以提供任何有关使:: before选择器工作的见解吗?

相关的html:

<body><section><article><div>   
<h2>What Others Have Said...</h2>
    <div class="centered">
        <h3 class="reviewExcerpt"><p>The services were awesome</p>
        </h3>
        <div class="5 floatRight">
            <p>&mdash; Anonymous</p>
        </div>
    </div>
</div></article></section></body>

相关CSS:

.reviewExcerpt p::after {
  content: "\00A0.\00A0.\00A0.";
}
.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小提琴:https://jsfiddle.net/k6y07r45/

代码显示::工作了几行之后。

1 个答案:

答案 0 :(得分:0)

CSS选择器(类[。]或ID [#])不能以数字开头。

This如果你想探索它,那么问题可以提供所需语法的一些见解。

我更新了您的JS Fiddle,将您的课程.5更改为.a-5。您还应该考虑让您的课程更具语义性,让您和其他任何人在复杂的项目中阅读您的代码清晰度。例如,rating5更有意义(更不用说有效)了。

现在值得注意的是:: before和:: after只能选择non-replaced elements。这并不会影响你现在正在做的事情,但是因为你正在试验另一个要记住的小故事。