Question

我有这个HTML：

<div class="leading-4">
<h2>title</h2>
<p>one para</p>
<p>Maybe another para</p>
<p><ul><li>.....</li></ul></p>
<h4>text</h4>
</div>

我想编辑其中包含ul的p -

我想过

.leading-4 p:nth-last-child(1){
}

和

.leading-4:nth-last-child(1){
}

但它也不起作用（虽然我认为不会）

我做错了什么

Answer 1

你想要的是last-of-type。

但正如Praveen所说，你应该修复你的HTML。如果有疑问，请使用W3C validator。

Answer 2

<ul>标记内不能有！因此，当您放置<ul></ul>时，浏览器会将其视为<ul></ul>。

从技术上讲，在<ul>内不能，因此您的CSS选择器永远不会在HTML中的任何情况下选择一个元素。

因此，请考虑将元素更改为<div>。

<强>证明：

＆＃13;

p {color: red;}
ul {color: blue;}
p ul {color: green;}

＆＃13;

<p>This is para</p>
<p>
  The next UL element will be kicked out of P. Before UL.
  <ul><li>This is LI inside UL inside P</li></ul>
  After UL. And this becomes normal text under the body, and not under P.
</p>
<ul><li>This is LI inside UL</li></ul>

＆＃13;

<强>参考文献：

<强>解决方案：

为您选择最后的解决方案是：

p:last-of-type { /* rules */}

nth-last-child选择器无法正常工作

2 个答案: