css - 第一个 child 没有像预期的那样影响第一个元素

标签 css css-selectors

<分区>

为什么规则不影响第一个 div? (带有“更新 1”文本)

.update div {
    width:100%;
    height:25%;
    border-top:1px dashed {color:background title};
    padding: 5px;
    color:{color:links nav};
    cursor:pointer;
}

.update div:first-child{
   border:none;
}

.update div:hover{
    color:{color:links nav hover};
}

.update div:hover > .symbol{
    color:{color:links nav};
}
<div class="nav update">
    <a><div><div class="symbol">×</div> update 1</div></a>
    <a><div><div class="symbol">×</div> update 2</div></a>
    <a><div><div class="symbol">×</div> update 3</div></a>
    <a><div><div class="symbol">×</div> update 4</div></a>
</div>

最佳答案

您的代码中没有作为 .update div 的第一个子元素的 div。你需要做这样的事情:

.update a:first-child > div {
   border:none;
}

尽管 HTML5 允许内联元素中包含像 div 这样的 block 元素,但我自己不会这样做。或许可以考虑 span。

进一步解释“第一个 child ”的概念:在您的代码中,每个 a 元素都是 .update div 的 child 。 a 元素中的 div 不是 .update div 的子元素;相反,它们是 a 元素的子元素。不过,代码中的每个 a 元素只有一个子 div;并且每个 那些 子 div 都有另一个子 div。因此,要使一个元素成为子元素,它必须直接位于父元素内部——可以说是向下一层。

关于css - 第一个 child 没有像预期的那样影响第一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33645307/

相关文章:

javascript - Android + iOS 上的 CSS 过渡

javascript - jQuery 点击只发生一次

javascript - 当前菜单项类突出显示 2 个菜单项

css - 选择列表中的第 6 个元素,从第 8 个元素开始

html - 为什么不是 :last-of-type working on tumblr?

css - 为什么这个li :last-child not work?

html - CSS 适合视口(viewport)内的 div,同时保持纵横比

css - 哪些 CSS 属性允许逗号分隔值?

html - 如果子链接或孙链接使用 CSS 处于事件状态,则将父链接设置为事件

css - css中使用选择器过滤掉某些元素