css伪类最后一个子问题

Question

我有网站 http://yournextleap.com/fresher-jobs 请找出最后一个具有 HTML 的 div

<div data-recommendation="" data-id="3790" data-guidance="" data-bucket="jobs">
<div class="inn">
/* Some code*/
</div>
</div>

.inn 有虚线下边框 并且它的父 div 是动态生成的

我想要什么：

1. 最后一个 DIV .inn 必须有边框：无；
2. 我试过了 :last-child
3. 我不想使用 JS 或 Jquery

我为主 div 添加了类（我暂时删除了它）；现在只有<div> 是

<div class="main">

就是这样，这是我的css

.main:last-child .inn{
border: none;}

但它不起作用

Answer 1

这就是我假设你拥有的：

    <div class="main">
        <div data-recommendation="" data-id="3790" data-guidance="" data-bucket="jobs">
            <div class="inn">
            /* Some code*/
            </div>
        </div>
    </div>

如果是这样，你需要：

    .main div:last_child .inn {
        border:none;
    }

Answer 2

嘿，我已经测试并在您的 css 中进行了以下更改

div.hero-unit div.recommendation + div div:last-child div.inn {border:none !important;}

它适用于 Firefox 和 Chrome 我正在测试相同的 IE 这仅适用于 IE 9+ 浏览器 IE 7 和 IE 8 将不支持此 CSS 选择器。

将在这里解释模式。

1. div.hero-unit是选择父div
2. div.recommendation 是选中div.hero-unit 里面的孩子
3. + div 将选择紧邻的下一个 div
4. div:last-child 将选择 div 中的最后一个子元素，即我们在第 3 点中选择的子元素
5. div.inn 将属性 border:none 设置为 !important 以便不应用其他边框，因为 border:none 将由于 !important 而被赋予最高优先级。

希望对每次阅读都有帮助。祝你好运