Question

我想在div的不同子节点上应用不同的风格。这是我的代码，但它不起作用。谁能帮助我？如何改变每个div孩子的风格。选择器nth-child（＆＃39; target＆＃39;）无法正常工作

HTML：

<div class='background'>
 bg1
</div>

<div class='image'>
 img1
</div>
<div class='image2'>
 img21
</div>
<div class='text'>
 <p>
       1 A website, also written as web site,is a collection of related web pages, including multimedia content, typically identified with a common domain name, and published on at least one web server.
  </p>
</div>
<div class='background'>
  bg2
</div>
<div class='image'>
 img2
</div>
<div class='image2'>
 img22
</div>
<div class='text'>
  <p>
       2 A website, also written as web site,is a collection of related web  pages, including multimedia content, typically identified with a common domain name, and published on at least one web server.
  </p>
</div>

我无法单独访问每个div孩子

CSS

 div.background:nth-child(1)
        {
            position: absolute;
            margin-top: -200%;
            width: 100%;
            height:180%;
        }
 div.image:nth-child(1){
            background-image: url(<?php echo base_url('Images/fantasy_mountain_art_hd_wallpapers.jpg'); ?>) ;
            position: relative;
            margin-top: 150px;
            height: 40%;
            width: 56%;
            margin-left: 20%;
            align-content: center;
            will-change: scroll-position;
            pointer-events: auto;
            background-size: 100% 280px;
            border: 4px solid gainsboro;
            border-radius: 5px;
        }
 div.image2:nth-child(1){
            background-image: url(<?php echo base_url('Images/RPyvJD.jpg'); ?>) ;
            background-size: 100% 280px;
            position: relative;
            margin-top: 100px;
            margin-left: 20%;
            height: 40%;
            width: 56%;
            border: 4px solid gainsboro;
            border-radius: 5px;
        }
  div.text:nth-child(1){
            position: relative;
            color: whitesmoke;
            margin-top: -10px;
            width: 50%;
            font-size: x-large;
            font-family: Forte;
            margin-left: 20%;
        }
  div.background:nth-child(2)
        {
            position: absolute;
            margin-top: 500px;
            width: 100%;
            height: 90%;
            background-color: black;
            -webkit-animation-name: example; /* Chrome, Safari, Opera */
            -webkit-animation-duration: 20s; /* Chrome, Safari, Opera */
            -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
            animation-name: example;
            animation-duration: 40s;
            animation-iteration-count: infinite;
        }
  div.image:nth-child(2)
        {
            background-image: url(<?php echo base_url('Images/tumblr_o7t5h0LV6T1tal018o1_500.gif'); ?>) ;
            position: absolute;
            width: 20%;
            height: 40%;
            margin-top:5% ;
            opacity :0.4;
        }
  div.image2:nth-child(2)
        {
            background-image: url(<?php echo base_url('Images/giphy3.gif'); ?>) ;
            position: absolute;
            margin-top: 5%;
            margin-left: 60%;
            width: 20%;
            height: 40%;
            opacity :0.4;
        }

Answer 1

因为你正在使用类，所以你在技术上不必使用nth-child（）来定位你想要的元素，但是如果你有/需要/想要使用nth-child，那么请确保你给它适当的如果你写的话，找到孩子的位置：

div.image:nth-child(2){}

它将查找div.image作为包装器的CHILD出现的第二个实例，因此请确保设置div包装器，如果要为其添加一个容器类，请将所有html元素放入想要使用nth-child来找到这个新容器。

然后您可以像这样使用选择器：

.container > div:nth-child(1) {}

希望它有所帮助，gl。

使用css在子div上应用不同的样式

1 个答案: