Question

我每天都尝试学习，并找到了一个教程，教师从list-group-item中选择第一个孩子来改变颜色。

我想玩这个并从list-group-item中选择last：child来更改文本修饰规则，仅针对span（更多），但不起作用。使用css，我也放在这里，更多的单词没有加下划线。

我该怎么做？

＆＃13;

.list-group-item {
        padding: 0px;
        margin-left: 20px;
    }
    .list-group-item:last-child {
        text-decoration: underline;
    }

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link href="style.css">
</head>
<body>
<div class="sidebar">
      <div class="row">
        <div class="sidebar-inner  ">
          <div class="list-group">
            <div class="list-group-item">
              <div class="float-left imageIcon">
                <img src="../images/sidebar_icon" class="img-responsive" alt="Icon">
              </div>
              <div class="float-right textDesc">
                <h4 class="list-group-item-heading">My Title</h4>
                <p class="list-group-item-text">Description</p>
              </div>
            </div>
            <div class="list-group-item">
              <span>More...</span>
            </div>
          </div>
          <div class="list-group">
            <div class="list-group-item">
              <div class="float-left imageIcon">
                <img src="../images/sidebar_icon" class="img-responsive" alt="Icon">
              </div>
              <div class="float-right textDesc">
                <h4 class="list-group-item-heading">My Title</h4>
                <p class="list-group-item-text">Description</p>
              </div>
            </div>
            <div class="list-group-item">
              <span>More...</span>
            </div>
          </div>
       </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

text-decoration: underline;不是text-decoration: underlined;。

编辑：添加了一个代码段：

.list-group-item {
	padding: 0px;
	margin-left: 20px;
}
.list-group-item:last-child {
	text-decoration: underline;
}

<div class="sidebar">
	<div class="row">
		<div class="sidebar-inner  ">
			<div class="list-group">
				<div class="list-group-item">
					<div class="float-left imageIcon">
						<img src="../images/sidebar_icon" class="img-responsive" alt="Icon">
					</div>
					<div class="float-right textDesc">
						<h4 class="list-group-item-heading">My Title</h4>
						<p class="list-group-item-text">Description</p>
					</div>
				</div>
				<div class="list-group-item">
					<span>More...</span>
				</div>
			</div>
			<div class="list-group">
				<div class="list-group-item">
					<div class="float-left imageIcon">
						<img src="../images/sidebar_icon" class="img-responsive" alt="Icon">
					</div>
					<div class="float-right textDesc">
						<h4 class="list-group-item-heading">My Title</h4>
						<p class="list-group-item-text">Description</p>
					</div>
				</div>
				<div class="list-group-item">
					<span>More...</span>
				</div>
			</div>
		</div>
	</div>

CSS last-child对我不起作用

1 个答案: