CSS 选择第二个后代

标签 css

我正在使用 Chrome 调试工具来查找页面上的元素。我无法理解逻辑。 这段 HTML 看起来像这样

这是我的第一个解决方案 firstVariant

这是一个菜单,我在其中尝试为“注销”选择第二个链接。但它不会将“a”识别为“div”的后代。

但是当我选择它时,它找到了它是“div”后代的元素的子元素

谁能解释一下为什么我按照第一张图片做的时候找不到它

secondVariant

最佳答案

a:nth-child(2)匹配 <a>元素是其直接父元素的第二个子元素。但是每个 <li>只有一个 child ,没有第二个 child 。这是 <ul>具有多个 <li> 的元素 children ,所以你需要把:nth-child li 上的修饰符, 然后选择 <a>在里面。

关于CSS 选择第二个后代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51146319/

相关文章:

javascript - 发布图片的脚本

html - 红色框没有出现,而是一条线

javascript - 如何在仅使用 CSS3 悬停时更改表格单元格的文本

html - 如何创建 3 列嵌套 CSS 网格布局?

javascript - jQuery 切换背景图片

css - 努力使用 float 按预期排列元素

css - 有没有办法将 SVG 元素的宽度设置为 100%?

html - 盒子模型和IE

css - 使用 Bootstrap 将文本在表格中右对齐

javascript - 使用 jQuery 定位所有没有特定父级的 dl 标签