时间戳

首页 > 解决方案 > 如何仅在一个 div 中的三个 div 中的两个上访问和应用属性

html - 如何仅在一个 div 中的三个 div 中的两个上访问和应用属性

问题描述

我正在尝试自学一些网络编码，所以请与我一起裸露。目前，我正在创建一个模态页面，其模态内容具有三个 div 元素（关闭按钮、图像和段落标签）。我在模态内容 div 中的 div 左侧应用了一些填充，因为我希望图像和段落能够很好地彼此相邻。但是，我希望填充仅适用于图像和段落标签，而不适用于关闭按钮。

我的问题是，有没有办法只将填充应用于图像和段落标签，而不是关闭按钮 div。

CSS

#modalPage1{
        
        height: 100%;
        width: 100%;
        position:absolute;
        top: 0;
        background-color: rgba(255, 128, 213, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #modalPage1 > #modalContent1 {
        background-color: white;
        height:100%;
        width: 75%;
        display:flex;
        align-items: center;
        position:relative;
           
   }

   #close{
       position: absolute;
       top: 0;
       right: 14px;
       font-size: 50px;
       transform: rotate(45deg);
       padding:0%;
   }
   div > #modalTxt{
       width: 80%;
   }

    #modalContent1 > div {
       
       padding-left: 10%;
   }
   div > #modalImg{
    width: 353px;
    height: 447px;
   }

HTML

<div ID= "modalPage1" class = "modalFish">
        
        <div ID = "modalContent1" class = "modalFishContent">
            
            <div ID="close">+</div>   

        <div><img ID= "modalImg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
        <div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, 
            I decided to use this as the background. Being that it's a dark color, it's easy to layer on different 
            colors that will coordinate well, while adding a pop to it. </p>

            <p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
                to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces 
                appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is 
                in fact fish swimming in all different directions.
            </p>
            </div>
            
        
        </div>
    </div>

标签： htmlcssnestedcss-selectorsappendchild

解决方案

您当前在下面拥有的 CSS 代码将填充应用于 div 内的每个 div id="modalContent1"。这是一个问题，因为您无法指定要应用填充的元素；如果它是一个 div，它会被填充。您可以将按钮更改为不是 div 的东西，但您添加的任何其他 div 仍会被填充。

#modalContent1 > div {
   
   padding-left: 10%;
}

除了这样做，我们可以使用类来代替，因此只有属于该类的元素才会被填充。我们可以先用下面的 CSS 替换上面的代码。

.padding {   
   padding-left: 10%;
}

这会将填充应用到每个带有class="padding". 现在我们只需要将类添加到 HTML 中。您ID="modalTxt"在 HTML 中使用了两次，但 ID 只能使用一次，因此我们可以将其class="modalTxt"替换为。确保你在你的 CSS 中也替换了它，这样你就可以保持宽度自定义，只需将#in更改div > #modalTxt为.如下所示：

div > .modalTxt{
   width: 80%;
}

可以使用多个类，只要它们用空格分隔，并且有一个单独的填充类可以让您自己自定义填充，以及自己自定义元素的其他属性。所以你的 HTML 看起来像：

<div ID= "modalPage1" class = "modalFish">
    
    <div ID = "modalContent1" class = "modalFishContent">
        
        <div ID="close">+</div>   

    <div><img ID= "modalImg" class = "modalFishImg padding" src="Images/Fish School.jpg"></div>
    <div><p class = "modalTxt padding">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall, 
        I decided to use this as the background. Being that it's a dark color, it's easy to layer on different 
        colors that will coordinate well, while adding a pop to it. </p>

        <p class = "modalTxt padding">Around this time I had been making a few more "simpler" and "cute" pieces, so I wanted to being myself back
            to making something a little bit more abstract. Although semi simple in design, from afar, the origami pieces 
            appear a bit obscure, almost reminiscent of a pile of leaves. Looking closely, we can see that the origami is 
            in fact fish swimming in all different directions.
        </p>
        </div>
        
    
    </div>
</div>

最后一件事，"modalFishTmg"如果您不打算在任何其他元素中使用该类，则可以安全地删除它，因为您已经使用 ID 为图像设置样式。此外，这些类可以放在您放置<img>和<p>标记的 div 中，但这会给 div 中的任何内容提供填充，如果您添加其他任何内容，这可能会出现问题。

推荐阅读