我花了差不多两个小时试图解决这个问题。任何人都可以提供任何有关使:: 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>— 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/
代码显示::工作了几行之后。
答案 0 :(得分:0)
CSS选择器(类[。]或ID [#])不能以数字开头。
This如果你想探索它,那么问题可以提供所需语法的一些见解。
我更新了您的JS Fiddle,将您的课程.5
更改为.a-5
。您还应该考虑让您的课程更具语义性,让您和其他任何人在复杂的项目中阅读您的代码清晰度。例如,rating
比5
更有意义(更不用说有效)了。
现在值得注意的是:: before和:: after只能选择non-replaced elements。这并不会影响你现在正在做的事情,但是因为你正在试验另一个要记住的小故事。