需要帮助使用nth-of-type和first-of-type

问题描述

我正在使用nth-of-type这样的CSS为我的学校做运动。我不允许更改给定的HTML代码，但我无法弄清楚。我试图在其他人中间获得第一“新闻”课。有人可以帮我吗。这就是已经走了多远。

我认为我应该使用Nth-of-type和first-of-type，因为我必须做一个小杯运动

  .navbar {
    background: tomato;
    padding: 0px;
    width: 99vw;
    height: 60px;
    margin: 0px;
    flex-direction: row;
    display: flex;
    
    color:black;
    font-weight: bold;
    font-size: 25px;
   
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 250px;
    justify-content: space-around;
   align-content:space-around;
  
  }

  .content { background:tan;
    width: 99vw;
    height: 400px;
    margin: 0px;
    display: flex;  
  }

  .news:nth-of-type(2),.news:nth-of-type(3),.news:nth-of-type(4) {
    flex-direction: column;
    display: flex;
    padding: 10px;
    justify-content: flex-end;
    align-items: center;
  }

  
 .news:first-of-type{
   flex-direction: column;
   display: flex;
   justify-content: flex-start;
   align-items: center;

 }

<!DOCTYPE html>
<html lang="en">

<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <Meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="navbar">
        <p>Home</p>
        <p>Our games</p>
        <p>Contact</p>
        <p>Support</p>
        <p>Log In</p>
    </div>

    <div class="content">
        <div class="news">
            <h1>Gaming Website</h1>
            <p>
                Welcome to our website! We have a wild variety of games that you will probably like.
                Feel free to make a suggestion if you'd like to have another game added.
            </p>
        </div>

        <div class="news">
            <h3>Steam Support is Now live</h3>
            <p>
                From Now on,you can also start up games from your Steam library!
                The developers have worked hard for this functionality.
                If you have any bugs,report them at the Support page.
            </p>
        </div>
        <div class="news">
            <h3>minecraft Steve confirmed for Smash?</h3>
            <p>
                Is Steve coming to Smash Ultimate?
                We have the latest hints and potential leaks to keep you
                updated about the possibility of the iconic tree-puncher
                coming to Smash Ultimate.
            </p>
        </div>
        <div id="breaking" class="news">
            <h3>Half-Life 3 confirmed</h3>
            <p>
                It is finally real. Since 1998,fans across the globe have been
                hoping for a conclusion to the Half-Life trilogy that was started
                ages ago.
                However,it was last Tuesday when it was announced that the game
                will be published next summer.
            </p>
        </div>
    </div>
</body>

</html>

解决方法

您采用的方法是基于弹性盒，但您可能会考虑使用网格布局。因为这是一项艰巨的练习，所以我不想在这里给您确切的解决方案，所以您可以在css3网格here中找到很好的介绍。

在您的情况下，我认为2x3网格（2行3列）就足够了。然后，您可以将第一新闻div扩展到第一行，并为其余3个新闻div分配第二行中的3个单元格：

有一个很好的工具可以找出正确的第n个选择器

检查http://nth-test.com/

但是您的第n个选择器并不难

您要使用类.news的第一个元素吗？

.news:first-of-type {
  color: red;
}

或者如果您需要第n个类型

.news:nth-of-type(1) {
  color: red;
}

css-selectors html