Html CSS子体和其他选择器

使用下面的HTML，我的CSS是否按照下面的规定显示

HTML:

---

同样重要的是，我哪里出错了？

这里发生了很多事情，所以我将试着逐一为您分析。这将是漫长的，但请容忍我

让我们让缩进更加一致，这样我们就可以看到HTML中发生了什么：

<ul>
  <li>1</li>
  <li>2</li>
  <ul>
    <li>3</li>
  </ul>
  <li>4</li>
</ul>

事实上，前三个

li

元素都不是任何

ul

的兄弟元素。只有最后一个是，它匹配两个兄弟选择器

那么，如何使内部的

ul

成为第二个

li

的子级呢？可以通过移动

使其显示在

之后来执行此操作，如下所示：

<ul>
  <li>1</li>     <!-- ul > li -->
  <li>2          <!-- ul > li -->
    <ul>
      <li>3</li> <!-- ul > li -->
    </ul>
  </li>
  <li>4</li>     <!-- ul > li, ul + li, ul ~ li -->
</ul>

1
二,

3


4

关键是，内部的

ul

现在将匹配不同的选择器：

li>ul

。此外，您的标记现在将被验证，因为您从一开始就不允许将

ul

作为另一

ul

的孩子

最后，您的一些规定需要更复杂的选择器，因为它们非常特别地匹配。我将带您逐一介绍：

要匹配1和3，请使用

ul>li:first child

。这是因为1和3是其各自父级的第一个子级

ul

s。您通常可以判断一个元素是否是另一个元素的第一个子元素，因为它的开始标记是在父元素的开始标记之后出现的第一个东西，忽略任何文本或空白

要匹配1、2和3，请使用

ul>li:first child，ul>li:nth child（2）

。附加的

：第n个子项（2）

专门针对第2项

要匹配1、2、3和4，使用

ul>li

就足够了，因为您只需将它们全部匹配即可。如果您的标记中只有

ul

，那么您可能只需要

li

就可以逃脱，但这不太可能，因此我的错误是过于具体，而不是不够具体

---

这是一个很难理解的问题，所以如果有任何问题让我感到困惑或难以理解，请告诉我，我会尽力解决您的问题。

我看到的第一个问题是

ul

应该只有

li

s儿童。您可以将

ul

放在

li

中，但它不应该是

ul

的直接子级。其次，

+

和

~

都是同级选择器，因此

ul+li

或

ul~li

不应该匹配任何内容。但是，在您提供的代码中，这两种代码只会将

li

与内容4匹配

是一个直接子选择器，因此它将匹配所有的

li

s。请查看此快速参考：使用第一个子、最后一个子和第n-child（）选择器。你的方法看起来太具体了。谢谢你的链接。。。尽管链接很好，我还是很难理解你的第一段。例如，第二个ul是li（2）的第一个孩子，但我想你说过它是第一个ul的直接孩子。另一个例子。。。li（1）是ul（1）的第一个兄弟姐妹，但您声明+和~不应该匹配任何东西？原谅我的慢，但我真的有麻烦了。@JohnLove shadymoses是对的；第二个

ul

是第一个

ul

的子项，这是不正确的。您应该修复它，使第二个

ul

位于

li

内部。恰恰相反。你的回答是“什么”和“为什么”。我不是在寻找“这是错误的，句号！”。我在寻找“出于这些原因，这是错误的，这是正确的方法”。你是一位优秀的老师，谢谢你。@John Love:谢谢你，这是我的荣幸：）现在只提一个问题。请重复我的原始标记，li-4是第一ul的几个兄弟之一，因此ul>li有效。李也一样。但不是？？？ul+li，因为li-4没有？？？立即跟随父母=第一个ul。它是第一个ul的几个孩子之一，而不是兄弟姐妹。但你是对的，我犯了一个错误；因为第二个ul在li-3中，所以第二个ul不再是任何li项目的兄弟，因为它现在是其中一个项目的孩子。所以li+li最终匹配所有的元素，包括li-4。我会修改我的答案。

<ul>
  <li>1</li>
  <li>2</li>
  <ul>
    <li>3</li>
  </ul>
  <li>4</li>
</ul>

<ul>
  <li>1</li>   <!-- ul > li -->
  <li>2</li>   <!-- ul > li -->
  <ul>
    <li>3</li> <!-- ul > li -->
  </ul>
  <li>4</li>   <!-- ul > li, ul + li, ul ~ li -->
</ul>

<ul>
  <li>1</li>     <!-- ul > li -->
  <li>2          <!-- ul > li -->
    <ul>
      <li>3</li> <!-- ul > li -->
    </ul>
  </li>
  <li>4</li>     <!-- ul > li, ul + li, ul ~ li -->
</ul>