html - 在不使用类或 ID 的情况下选择 div

标签 html css

<div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
 </div>    

 <div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
 </div>

A 应为红色,B 应为绿色,C 应为蓝色。现在,如果我使用类或 ID,我可以轻松解决此问题,但如果出于某种原因我不想使用单个类/ID 怎么办?我知道这是可能的,但无法终生弄清楚。

我可能不得不对子选择器使用某些东西,但它一直无法正常工作,我几乎尝试了所有可能的组合。

最佳答案

nth-child 是解决方案

这将允许您根据元素相对于父元素的位置来选择元素

div div:nth-child(1){
  color:red;
}

div div:nth-child(2){
  color:green;
}

div div:nth-child(3){
  color:blue;
}
<div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
 </div>    

 <div>
   <div>A</div>
   <div>B</div>
   <div>C</div>
 </div>

关于html - 在不使用类或 ID 的情况下选择 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53795813/

相关文章:

html - 是否可以使用 Flexbox 来设置响应式功能列表的样式

html - 如何使用 flex 为所有 div 获得相同的高度?

JavaFX 去除工具栏渐变

html - 我如何使用 Perl 可靠地解析 QuakeLive 播放器配置文件?

html - 正文不包装内容(不是 float 或正文,html 100% 的东西……)

css font-weight 属性不适用于按钮

html - 根据两个内容器中较大的一个设置容器高度

javascript - 创建这个水平菜单导航栏最简单的方法是什么?

javascript - 如何制作分数进度条 HTML/CSS/JS

javascript - 使用 Javascript 的 SVG 旋转