用 CSS 解决
要选择特定类的最后一个元素,我们可以使用 CSS :last-of-type 伪类。
在这个片段中,我们将展示带有 HTML <article> 和 <p> 元素的示例。
选择特定类的最后一个 <article> 元素的示例:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <style> body { background: #95ada2; } .comment { width: 470px; border: 1px solid #ffffff; padding: 10px; border-bottom: 2px dotted #f0f0f0; margin-bottom: 10px; } .comment:last-of-type { border-bottom: 3px dashed lightblue; margin-bottom: 0; } </style> </head> <body> <div class="commentList"> <article class="comment"></article> <article class="comment"></article> <article class="comment"></article> <div class="text"> hello </div> </div> </body> </html>
选择特定类的最后一个 <p> 元素的示例:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <style> .text:last-of-type { background: purple; font-style: italic; color: #eeeeee; } </style> </head> <body> <h1>Example of :last-of-type selector </h1> <p class="text">Paragraph number 1.</p> <p class="text">Paragraph number 2.</p> <p class="text">Paragraph number 3.</p> <p class="text">Paragraph number 4.</p> </body> </html>
日期:2020-06-02 22:15:12 来源:oir作者:oir