html - 如何从 CSS 中的 div 中选择第一个类?

标签 html css

<分区>

这是我的 html 代码:

<div class="role-main">
    <div class="abc">
    </div>
    <div class="bca">
    </div>
    <div class="test">
    </div>
    <div class="test">
    </div>
    <div class="test">
    </div>
</div>

这是 css 部分:

.role-maine .test:first-of-type {margin-left:0px}
.role-maine .test {margin-left:30px;}

所以我要为名为“test”的第一类分配 de margin-left:0px 吗?

最佳答案

您正在寻找的选择器似乎是 :first-child,例如:

.role-main .test:first-child { margin-left: 0; }

在这种情况下并重构它,您还可以这样做:

/* .role-main .test:first-of-type {margin-left:0px}
   Not needed anymore */
.role-main .test:not(:first-child) { margin-left: 30px; }

编辑:作为对@Popnoodles 回答的补充,您命名的类别确实不同。我的代码是固定的。

关于html - 如何从 CSS 中的 div 中选择第一个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31939661/

上一篇:php - 自定义默认的 Laravel CSS

下一篇:html - font-face 无法在 Chrome 中正确显示某些字符

相关文章:

CSS Flex 网格 - 最后一项的宽度相同

javascript - 自定义 C3JS 图例。如何添加文本和新行?

html - 为什么应用背景颜色时文本输入会更改其边框属性?

javascript - JQuery 检查它是否正在拖动,如果没有则被拖动的对象返回到原始位置

HTML 标记添加冗余 <a> 标签 <div>?

html - CSS:带有 ltr 插入的 rtl 输入元素

javascript - 使用具有可调整大小和可排序元素的 flexbox 进行砖石布局的选项有哪些

html - CSS/HTML - 在手机上隐藏图像并使用替代文本

javascript - 将文本框中的数字分成 4 组数字,每个数字得到其总和,并将每组中每个总和的所有最后一位数字组合起来

html - 使用桌面浏览器的元视口(viewport)标签设置视口(viewport)