Html 无法理解not:（：最后一个子项）选择器_Html_Css

Html 无法理解not:（：最后一个子项）选择器

html css

Html 无法理解not:（：最后一个子项）选择器,html,css,Html,Css,我是HTML/CSS新手，在理解：not（：last child）选择器的工作原理方面有点困难。我已经阅读了关于MDN的解释，它有点让我不知所措，所以我希望得到一个更简单的解释。为了更好地说明我的问题，我编写了以下代码： <html> <head> <style> .paragraph:not(:last-child) { background: #ff0000; } </style> </head> <body>

我是HTML/CSS新手，在理解

：not（：last child）

选择器的工作原理方面有点困难。我已经阅读了关于MDN的解释，它有点让我不知所措，所以我希望得到一个更简单的解释。为了更好地说明我的问题，我编写了以下代码：

<html>
<head>
<style> 
.paragraph:not(:last-child) {
  background: #ff0000;
}
</style>
</head>
<body>

<p class="paragraph">The first paragraph.</p>
<p class="paragraph">The second paragraph.</p>
<ul class="list">
    <li class="list_item">List 1</li>
    <li class="list_item">List 1</li>
    <li class="list_item">List 1</li>
    <li class="list_item">List 1</li>
</ul>

<div class="new_div">
    <p class="test123">Hello World!</p>
</div>

</body>
</html>


.段落：不（：最后一个孩子）{
背景：#ff0000；
}
第一段
第二段

列表1
列表1
列表1
列表1

你好，世界

根据我的理解，

.paragration:not（：last child）{background:#ff0000；}

应该告诉CSS对每个类为“paragration”的元素应用红色背景，最后一个除外。我应该看到的行为是在第一段应用红色背景，而不是其他

但是，CSS将红色背景应用于两个段落。这几乎就像CSS将无序列表归类为一个段落，并将其视为最后一个子项或其他内容。但我看不出有什么理由会这样

如果有人能解释这种行为的意义，我将非常感激。请记住我是个初学者，所以如果可能的话，ELI5你非常接近！最后一个子pseudo需要上下文中的项目计数，在代码中，您要说出所有段落，但不限制集合，因此浏览器不知道要设置哪个样式

我已经更新了您的代码，将段落包含在div中，现在最后一段的样式不是红色背景。我没想到把一个伪字放在一个非伪字中，所以我也学到了一些东西

例如，如果要对无序列表执行相同的操作，则可以执行所有无序列表li，或者使用list类将列表与此样式的该类隔离。这是因为li的数量是内在的，这意味着浏览器知道已经有多少

.container.段落：非（：最后一个子项），
ul.列表li：不是（：最后一个孩子），
.new_div p:不是（最后一个孩子）{
背景：#ff0000；
}


第一段
第二段

列表1
列表1
列表1
列表1

你好，世界
你好，世界