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

【问题标题】：apply different style on child div using css使用 css 在子 div 上应用不同的样式
【发布时间】：2016-12-02 16:40:06
【问题描述】：

我想对 div 的不同子元素应用不同的样式。这是我的代码，但它不起作用。有人可以帮我吗？如何更改每个 div 子项的样式。选择器 nth-child('target') 不起作用

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;
        }

【问题讨论】：

独立样式的范围是否围绕背景图像？因为除非您的 .css 文件是 .php，否则它不会处理您的 <?php echo> 请求
对于初学者，你只有一个 div .background 并且它是第四个孩子，所以如果你想定位它，你可以说div.background 或div:nth-child(4)。以此类推。
@ether 是的，完全有可能有一个输出 css 的 php 文件。一个简单的header 命令就足够了。
@MrLister 我知道，这就是我说的原因，除非它是 .php 文件，因为他们没有指定文件名。 php文件可以输出css，css文件不能输出php。

标签： html css

【解决方案1】：

由于您使用的是类，因此从技术上讲，您不必使用 nth-child() 来定位您想要的元素，但是如果您有/需要/想要使用 nth-child，请确保给它适当的找到孩子的位置，如果你写的话：

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

它将查找 div.image 显示为任何包装器的 CHILD 的第二个实例，因此请确保您设置了一个 div 包装器，如果您想向其中添加一个容器类，请将所有 html 元素放入想使用 nth-child 在这个新容器中查找。

那么你可以像这样使用选择器：

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

希望对你有帮助，gl。

【讨论】：