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

Question

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

我的问题是，有没有办法只对图像和段落标签应用填充，而不是关闭按钮 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>

Answer 1

有多种方法可以做到这一点。

在#modalImg 和#modalTxt 中添加填充。
不要在 img 和 p 中使用 2 个标签。将它们放在一个 div 标签下并应用内联 CSS 或单独的 class 或 id .

Answer 2

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

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

我们可以使用 classes 而不是这样做，因此只有属于 class 的元素才会被填充。我们可以先用下面的 CSS 替换上面的代码。

.padding {   
   padding-left: 10%;
}

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

div > .modalTxt{
   width: 80%;
}

可以使用多个 classes，只要它们用空格分隔，并且有一个单独的 class 用于填充可以让你自定义填充本身，以及元素的其他自己的属性。所以你的 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" class，因为您已经使用 ID 设置了图像样式。此外，classes 可以放在 divs 中，您可以在其中放置 <img> 和 <p> 标记，但这会给 [=44 中的任何内容填充=]，如果您添加任何其他内容，这可能是一个问题。

Answer 3

要将样式应用于 #modalContent1 的每个子项 div，除了 的 div 标识符关闭此代码段使用 CSS :not 伪 class:

   #modalContent1 > div:not(#close) {
/* set the padding as required here */  
   }

为了让这个测试更明显，设置了相关元素的背景颜色而不是填充：

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

#modalContent1>div:not(#close) {
  background-color: cyan;
}

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

注意：全页查看，否则元素重叠，无法正确看到效果。

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

How to access and apply properties on only two of three divs within a div

html

css

nested

css-selectors

appendchild