为什么我的第 nth-of-type pseudo class 没有选择第一个，而将其视为第 4 个？

Question

我的问题是：为什么 .main-index a:nth-child(4) 正在处理我的第一个 a link，而不是 .main-index a:nth-child(1)？

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

它有效，但我知道这不是 select 第一个的正确方法。有谁知道如何 select .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>

Answer 1

这就是 nth-child 的工作原理。 <a> 元素是 main 元素的第 4 个 child。 a selector 在您的 selector 序列中的存在仅确保仅当第 4 个子元素是 <a> 元素时才应用样式。

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

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

Does anyone know how to select the first a in .main-index the right way.

就我个人而言，我会向 <a> 元素添加 id 或 class 属性，并在其上添加 select。这样，即使您的 HTML 被修改以引入新元素，您的 CSS 也不会停止工作。

如果出于某种原因您无法修改 HTML，但它是唯一指向您的反馈页面的 link，并且始终指向 "feedback.html"，您也可以使用：

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

Answer 2

而不是：

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

您可以使用：

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

你可以看看这些伪class的区别：

:nth-child()

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element. More simply stated, the selector matches a number of child elements whose numeric position in the series of children matches the pattern an+b.
:nth-of-type()

The :nth-of-type(an+b) CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you're selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

.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>

使用大量伪classes 的问题在于，如果您的标记发生变化，您的CSS 就会中断。

我建议将 class 添加到要添加样式的 <a> 元素，而不是使用大量伪 class 元素，原因如下：

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

Answer 3

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

Answer 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>

Answer 5

Why is .main-index a:nth-child(4) working on my first a link, and not .main-index a:nth-child(1)?

:nth-child(an + b) 伪 class 匹配一个元素，如果它是其父元素的第 an + b 个子元素（表达式为 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

为什么我的第 nth-of-type pseudo class 没有选择第一个，而将其视为第 4 个？

Why is my nth-of-type pseudo class not selecting the first a, and see it as the 4 one?

html

css

css-selectors

pseudo-class