CSS一般元素优先于类?

时间:2016-10-15 22:45:56

标签: html css inheritance



ul {
  width: 250px;
}
li {
  margin: 10px;
}
ul.illuminations {
  list-style-position: outside;
}
ul.season {
  list-style-position: inside;
}
ul.2 {
  list-style: inside circle;
  width: 300px;
}
li.3 {
  margin: 100px;
}

<ul class="illuminations">
  <li>That idol, black eyes and yellow mop, without parentsw our court ...</li>
  <li>Gracious son of Pan! Around your forehead crowned with flowerets ...</li>
  <li>When the world is reduced to a single dark wood for our four...</li>
</ul>
<hr />
<ul class="season">
  <li>Once, if my memory serves me well, my life was a banquet...</li>
  <li>Hadn't I once a youth that was lovely, heroic, and fabulous...</li>
  <li>Autumn already! - But why regret the everlasting sun if we are</li>
</ul>
<hr />
<h1>Quotes from Edgar Allan Poe</h1>
<ul class="2">
  <li class="3">I have great faith in fools; self-confidence my friends call it.</li>
  <li class="3">All that we see or seem is but a dream within a dream.</li>
  <li class="3">I would define, in brief, the poetry of words as the rhythmical creation of beauty.</li>
</ul>
&#13;
&#13;
&#13;

前两个列表确实获得了不同的标记位置。但是,最后一个列表并没有通过使用更具体的声明来获取我打算使用的列表样式和宽度属性。这是我现在多次遇到的问题。为什么这是我应该如何定位特定元素以覆盖属性?

1 个答案:

答案 0 :(得分:2)

CSS标识符不能以数字开头。因此.2.3是无效的选择器。您可以将其转义为.\32.\33

&#13;
&#13;
ul {
  width: 250px;
}
li {
  margin: 10px;
}
ul.\32 {
  list-style: inside circle;
  width: 300px;
}
li.\33 {
  margin: 100px;
}
&#13;
<ul class="2">
  <li class="3">I have great faith in fools; self-confidence my friends call it.</li>
  <li class="3">All that we see or seem is but a dream within a dream.</li>
  <li class="3">I would define, in brief, the poetry of words as the rhythmical creation of beauty.</li>
</ul>
&#13;
&#13;
&#13;