html - 为什么我的第 nth-of-type 伪类不选择第一个 a，并将其视为第 4 个？

我的问题是:为什么 .main-index a:nth-child(4) 在我的第一个 a 链接上工作，而不是 .main-索引 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-child(4) {}

您可以使用:

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

你可以看看这些伪类的区别:

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

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

我建议在 <a> 中添加一个类出于以下原因，您希望向其添加样式而不是使用大量伪类的元素:

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

关于html - 为什么我的第 nth-of-type 伪类不选择第一个 a，并将其视为第 4 个？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40637080/

html - 为什么我的第 nth-of-type 伪类不选择第一个 a，并将其视为第 4 个？

上一篇：html - 如何仅使用 CSS 在 X 和 Y 方向上进行转换

下一篇：javascript - 根据其 id 更改顺序元素的淡入