为什么我的 nth-of-type 伪类没有选择第一个 a，而将其视为第 4 个？答案

【问题标题】：Why is my nth-of-type pseudo class not selecting the first a, and see it as the 4 one?为什么我的 nth-of-type 伪类没有选择第一个 a，而将其视为第 4 个？
【发布时间】：2017-03-30 22:38:36
【问题描述】：

我的问题是：为什么.main-index a:nth-child(4) 在我的第一个a 链接上工作，而不是.main-index a:nth-child(1)？

我似乎找不到问题或我做错了什么。

它有效，但我知道这不是选择第一个的正确方法。有谁知道如何正确选择.main-index中的第一个a

.main-index h2 {
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: #3b3b3b;
    color: white;
    font-size: 25px;
    letter-spacing: 1px;
    margin: 0;
    font-family: "LemonMilk";
}


/********************************************
3.0 feedback
*********************************************/

.main-index p:nth-of-type(1) {
    margin: 15px 0 0 10px;
    text-transform: uppercase;
    font-size: 14px;
    float: left;
    font-family: "NeueHaasGrotesk Light";
}

.main-index p:nth-of-type(2) {
    clear: both;
    margin-top: 10px;
    display: inline-block;
}

.main-index img {
    margin: 10px 0 0 5px;
    height: 25px;
    float: left;
}

.main-index a:nth-child(4) {
    float: right;
    margin: 7px 10px 0 0;
    padding: 10px;
    background-color: #0e8f9c;
    color: white;
    border: none;
    font-size: 13px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-family: "NeueHaasGrotesk medium";
}


/********************************************
5.0 Ticket Info International Student
*********************************************/

.main-index p:nth-of-type(2) {
    margin: 10px;
    font-size: 18px;
}

.main-index a:nth-child(6) {
    background-color: #d3464e;
    padding: 10px;
    margin: 15px;
    display: block;
    text-align: center;
}


/********************************************
6.0 main content
*********************************************/

.background-home {
    background-image: url(../img/goingoutparadiso.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 80%;
    padding: 20px 0;
}

.background-home li {
    text-align: center;
    line-height: 90px;
    font-size: 50px;
    border-bottom: 5px solid white;
    border-top: 5px solid white;
    box-shadow: 1px 1px 2px #3b3b3b;
    text-transform: uppercase;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

.background-home a {
    display: block;
}

.background-home h3 {
    margin: 0;
    font-family: "NeueHaasGrotesk bold";
    text-shadow: 2px 2px #3b3b3b;
    border: 3px solid white;
    padding: 5px;
    display: inline;
}

.background-home li:nth-child(1) {
    border-top: 0;
}

.background-home li:nth-child(2) {
    margin-top: 20px;
    margin-bottom: 20px;
}

.background-home li:nth-child(3) {
    margin-top: 20px;
    margin-bottom: 20px;
}

.background-home li:nth-child(4) {
    border-bottom: 0;
}

<main class="main-index">
        <h2>different spots</h2>
        <p>your feedback matters</p>
        <img alt="feedback page indicator" src="img/more-info-arrow-black.svg">
        <a href="feedback.html">feedback</a>
        <p>Just like every student, you as an international student can get discount in several clubs and bars in Amsterdam. This ticket will save you time and money!</p>
        <a href="https://www.tiqets.com/en/amsterdam-c75061/amsterdam-nightlife-clubs-free-drinks-p973786" target="_blank">Tickets for Amsterdam Nightlife &amp; Clubs + Free Drinks</a>
        <nav>
            <ul class="background-home">
                <li>
                    <a href="clubs.html"><h3>clubs</h3></a>
                </li>
                <li>
                    <a href="bars.html"><h3>bars</h3></a>
                </li>
                <li>
                    <a href=""><h3>music</h3></a>
                </li>
                <li>
                    <a href=""><h3>festivals</h3></a>
                </li>
            </ul>
        </nav>
    </main>

【问题讨论】：

感谢您的信息！ .main-index > a:nth-of-type(1) 完成了这项工作。现在我对选择器及其工作原理有了更多了解。再次感谢！

标签： html css css-selectors pseudo-class

【解决方案1】：

代替：

.main-index a:nth-child(4) {}

你可以使用：

.main-index > a:nth-of-type(1) {}

您可以阅读这些伪类的区别：

:nth-child()

:nth-child(an+b) CSS 伪类匹配具有对于给定的正数，文档树中它之前的 an+b-1 个兄弟姐妹或 n 为零，并且有一个父元素。更简单地说，选择器匹配多个子元素，其数字位置在这一系列的孩子与模式 an+b 匹配。
:nth-of-type()

:nth-of-type(an+b) CSS 伪类匹配具有文档中具有相同元素名称的 an+b-1 个兄弟姐妹树，对于 n 的给定正值或零值，并且具有父级元素。有关语法的更详尽描述，请参见 :nth-child 其论点。这是一个更灵活和有用的伪选择器，如果您要确保选择相同类型的标签它在父元素内的位置，或者其他不同的标签出现在它面前。

.main-index h2 {
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: #3b3b3b;
  color: white;
  font-size: 25px;
  letter-spacing: 1px;
  margin: 0;
  font-family: "LemonMilk";
}
/********************************************
3.0 feedback
*********************************************/

.main-index p:nth-of-type(1) {
  margin: 15px 0 0 10px;
  text-transform: uppercase;
  font-size: 14px;
  float: left;
  font-family: "NeueHaasGrotesk Light";
}
.main-index p:nth-of-type(2) {
  clear: both;
  margin-top: 10px;
  display: inline-block;
}
.main-index img {
  margin: 10px 0 0 5px;
  height: 25px;
  float: left;
}
.main-index > a:nth-of-type(1) {
  float: right;
  margin: 7px 10px 0 0;
  padding: 10px;
  background-color: #0e8f9c;
  color: white;
  border: none;
  font-size: 13px;
  text-transform: capitalize;
  letter-spacing: 1px;
  font-family: "NeueHaasGrotesk medium";
}
/********************************************
5.0 Ticket Info International Student
*********************************************/

.main-index p:nth-of-type(2) {
  margin: 10px;
  font-size: 18px;
}
.main-index a:nth-child(6) {
  background-color: #d3464e;
  padding: 10px;
  margin: 15px;
  display: block;
  text-align: center;
}
/********************************************
6.0 main content
*********************************************/

.background-home {
  background-image: url(../img/goingoutparadiso.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 80%;
  padding: 20px 0;
}
.background-home li {
  text-align: center;
  line-height: 90px;
  font-size: 50px;
  border-bottom: 5px solid white;
  border-top: 5px solid white;
  box-shadow: 1px 1px 2px #3b3b3b;
  text-transform: uppercase;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
}
.background-home a {
  display: block;
}
.background-home h3 {
  margin: 0;
  font-family: "NeueHaasGrotesk bold";
  text-shadow: 2px 2px #3b3b3b;
  border: 3px solid white;
  padding: 5px;
  display: inline;
}
.background-home li:nth-child(1) {
  border-top: 0;
}
.background-home li:nth-child(2) {
  margin-top: 20px;
  margin-bottom: 20px;
}
.background-home li:nth-child(3) {
  margin-top: 20px;
  margin-bottom: 20px;
}
.background-home li:nth-child(4) {
  border-bottom: 0;
}

<main class="main-index">
  <h2>different spots</h2>
  <p>your feedback matters</p>
  <img alt="feedback page indicator" src="img/more-info-arrow-black.svg">
  <a href="feedback.html">feedback</a>
  <p>Just like every student, you as an international student can get discount in several clubs and bars in Amsterdam. This ticket will save you time and money!</p>
  <a href="https://www.tiqets.com/en/amsterdam-c75061/amsterdam-nightlife-clubs-free-drinks-p973786" target="_blank">Tickets for Amsterdam Nightlife &amp; Clubs + Free Drinks</a>
  <nav>
    <ul class="background-home">
      <li>
        <a href="clubs.html"><h3>clubs</h3></a>
      </li>
      <li>
        <a href="bars.html"><h3>bars</h3></a>
      </li>
      <li>
        <a href=""><h3>music</h3></a>
      </li>
      <li>
        <a href=""><h3>festivals</h3></a>
      </li>
    </ul>
  </nav>
</main>

使用大量伪类的问题在于，如果您的标记发生更改，您的 CSS 就会损坏。

我建议向您想要添加样式的<a> 元素添加一个类，而不是使用大量伪类，原因如下：

更易于维护。
可重用性（您可以在多个元素上使用同一个类。）
样式不会破坏您的标记更改。

【讨论】：

【解决方案2】：

为什么.main-index a:nth-child(4) 在我的第一个链接上工作，而不是.main-index a:nth-child(1)？

:nth-child(an + b) 伪类匹配一个元素，如果它是其父元素的an + bth 子元素（表达式为explained here）。所以：

.main-index a                 Matches all a elements inside .main-index

.main-index a:nth-child(4)    Matches all a elements inside .main-index that are
                              also the 4th child of their parent
                              It will match the feedback link

.main-index a:nth-child(1)    Matches all a elements inside .main-index that are
                              also the 1st child of their parent
                              It will match clubs, bars, ..., festivals links

【讨论】：

【解决方案3】：

这就是nth-child 的工作原理。 <a> 元素是 main 元素的第四个 child。选择器序列中 a 选择器的存在仅确保只有在第 4 个子元素是 <a> 元素时才会应用样式。

如果您想按顺序专门挑选出<a> 元素，您可以改用nth-of-type，并指定您想要第一个：

.main-index > a:nth-of-type(1) { ... }

有谁知道如何正确选择.main-index中的第一个a。

我个人会为您的<a> 元素添加一个id 或class 属性，然后选择它。这样，如果您的 HTML 被修改以引入新元素，您的 CSS 将不会停止工作。

如果由于某种原因您无法修改 HTML，但它是指向您的反馈页面的唯一链接，并且总是指向“feedback.html”，您也可以使用：

a[href="feedback.html"] { ... }

【讨论】：

【解决方案4】：

.main-index > a

这将针对

<a href="https://www.tiqets.com/en/amsterdam-c75061/amsterdam-    nightlife-clubs-free-drinks-p973786" target="_blank">Tickets for Amsterdam     Nightlife &amp; Clubs + Free Drinks</a>

.main-index nav li:nth-child(1) a

这将针对

<li>
    <a href="clubs.html"><h3>clubs</h3></a>
</li>

.main-index nav li:nth-child(2) a

这将针对

<li>
    <a href="bars.html"><h3>bars</h3></a>
</li>

【讨论】：

【解决方案5】：

nth-child 不区分元素类型。在您的 HTML 中，第 4 个孩子是您的第一个 a 标签。尝试使用nth-of-type。

【讨论】：