如何让CSS样式作用于所有子元素？附相关HTML代码

嘿，我来帮你搞定这个CSS样式的问题～首先先把你的HTML代码整理成更清晰的格式，方便后续写样式：

<div class="photodetail table"> 
  <div class="photodetail row"> 
    <div class="photodetail cell">Date:</div> 
    <div class="photodetail cell">Mar 24 2015 14:23:59</div> 
  </div> 
  <div class="photodetail row"> 
    <div class="photodetail cell">Camera:</div> 
    <div class="photodetail cell">SAMSUNG GT-I9300</div> 
  </div> 
  <div> 
    <!-- THIS DIV --> 
    <div class="...">（代码未完成）</div>
  </div>
</div>

接下来根据你想要的作用范围，有几种实用的实现方式：

1. 作用于容器下所有层级的子元素 #

如果你希望.photodetail.table里面的每一个元素（不管是直接子元素，还是嵌套更深的子节点）都应用样式，可以用通用选择器结合后代选择器：

/* 选中.photodetail.table下的所有子元素，包括嵌套最深的元素 */
.photodetail.table * {
  /* 示例样式：加浅灰边框方便查看效果 */
  border: 1px solid #eee;
  /* 内边距调整间距 */
  padding: 8px;
  /* 块级元素自动换行 */
  display: block;
}

这种写法会把所有嵌套在里面的标签（包括那个未完成类名的div）都覆盖到。

2. 只作用于容器的直接子元素 #

如果你只想给.photodetail.table的第一层子元素（也就是那两个.photodetail.row和那个额外的<div>）加样式，用子选择器更精准：

/* 仅选中.photodetail.table的直接子元素 */
.photodetail.table > * {
  margin-bottom: 12px; /* 给每个行/块添加底部间距 */
  background-color: #f9f9f9;
}

这种写法不会影响到.cell这类更深层的元素，只会作用于第一层级的子节点。

3. 精准作用于特定类的子元素 #

如果你想针对特定类的子元素（比如所有.photodetail.row和.photodetail.cell）设置样式，直接用类选择器组合即可：

/* 给所有行设置横向排列的样式 */
.photodetail.table .photodetail.row {
  display: flex;
  gap: 16px; /* 单元格之间的间距 */
  margin-bottom: 10px;
}

/* 给所有单元格设置文字样式 */
.photodetail.table .photodetail.cell {
  font-size: 14px;
  color: #333;
}

/* 给那个未完成的div补全类名后加样式（比如类名叫extra-block） */
.photodetail.table .extra-block {
  padding: 10px;
  border-left: 3px solid #2196F3;
}

这种方式针对性更强，不会误作用到其他无关元素。

你可以根据自己的实际需求选择对应的写法～

内容的提问来源于stack exchange，提问作者martin