Question

我在我的<li>中应用了一些样式，但这个样式在标签<span>内部不起作用的奇怪部分，我认为我在父李中定义的样式将适用于所有孩子我是对的？

有人能解释我为什么吗？感谢。

的CSS：

.days li a {
  display: block;
  color: red;
}

.days li a:hover {
  text-decoration: none;
  background-color: red;
  color: white;
}

.days li {
  background-color: black;
  text-indent: 20px;
  line-height: 40px;
  margin: 0 0 10px 0;
  font-weight: 220;
  width: 300px;
}

.days li span {
  font-weight: 300;
  color: blue;
  font-size: 12px;
}

HTML：

<ul class="days">
  <li><a href="">January 3, 2016 <br><span> Day 01</span></a></li>
  <li>January 3, 2016
    <br><span>january 01</span></li>
  <li>January 3, 2016
    <br><span>february 01</span></li>
</ul>

jsfiddle ：https://jsfiddle.net/3mesf9g7/

Answer 1

如果您希望spans继承{set} text-indent display:block，则内联元素无法继承

Answer 2

.days li a {
  display: block;
  color: red;
}

.days li a:hover {
  text-decoration: none;
  background-color: red;
  color: white;
}

.days li {
  background-color: black;
  text-indent: 20px;
  line-height: 40px;
  margin: 0 0 10px 0;
  font-weight: 220;
  width: 300px;
}

.days li span {
  font-weight: 300;
  color: blue;
  font-size: 12px;
  display:block;
}

<ul class="days">
  <li><a href="">January 3, 2016 <br><span> Day 01</span></a></li>
  <li>January 3, 2016
    <br><span>january 01</span></li>
  <li>January 3, 2016
    <br><spa

Answer 3

<style>
.days li a {
  display: block;
  color: red;
}

.days li a:hover {
  text-decoration: normal;
  background-color: red;
  color: white;
}

.days li {
  background-color: black;
  text-indent: 20px;
  line-height: 40px;
  margin: 0 0 20px 0;
  font-weight: 220;
  width: 300px;
}

.days li span {
  font-weight: 300;
  color: blue;
  font-size: 12px;
  display:block;
}
</style>
<ul class="days">
  <li><a href="">January 3, 2016 <br><span> Day 01</span></a></li>
  <li>January 3, 2016
    <br><span>january 01</span></li>
  <li>January 3, 2016</li>
  </ul>

这也有用。这段代码是否正确

text-indent无法使用<span> <li> children

3 个答案: