包装内容在使用选择一个div

Question

不知道如何短语它任何好转。我可以使用CSS选择器注入围绕目标<div>的内容的额外包装<div>？

所以我们可以说我的网页看起来是这样的：

<div>
  <h3>Something</h3>
  <img src='/../../img/logo.jpg' />
</div>

我想通过CSS来改变它：

<div>
  <div id='newlyAddedDiv' class='something'>
    <h3>Something</h3>
    <img src='/../../img/logo.jpg' />
  </div>
</div>

这是可能通过CSS选择器或伪选择？我看着before，after，first-child等，但他们似乎没有这样的伎俩。

编辑

这是问题所在。我有一个网格（有点像的照片库）工作，要围绕增加每个项目利润率。这是引导4 BTW。

<div id='Gallery'>
  <div class='col-3'>
    <h3>
    <img>
    <p>
  </div>
  ...
</div>

这将创建一个4列的网格。父DIV添加保证金（COL-3）影响电网本身（我理解为什么会这样）。我不能余量/填充添加到内容元素或者（因为它们是多个）。所以，我认为这将是容易的，如果我能注入围绕内容的“包装” div并增加保证金了。不幸的是这也似乎并没有被现在的可能性。

Answer 1

你想要改造这个：

<div id='Gallery'>
  <div class='col-3'>
    <h3>
    <img>
    <p>
  </div>
  ...
</div>

这个：

<div id='Gallery'>
  <div class='col-3'>
    <div class="new">
      <h3>
      <img>
      <p>
    </div>
  </div>
  ...
</div>

为了能够边距添加到.new。在这种情况下，你可以简单地缘添加到里面像下面的内容：

.col-3 > * {
   margin:0 10px 0; /*no magin-top/bottom*/
}

.col-3 > :first-child {
   margin:10px 10px 0; /*no margin-bottom*/
}
.col-3 > :last-child {
   margin:0 10px 10px; /*no margin-top*/
}

示例代码：

img {
  width:80px;
}
.col-3 {
  outline:1px solid red;
}
.col-3 > * {
   margin:0 10px 0; /*no magin-top/bottom*/
}

.col-3 > :first-child {
   margin:10px 10px 0; /*no margin-bottom*/
}
.col-3 > :last-child {
   margin:0 10px 10px; /*no margin-top*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div id='Gallery' class="container">
  <div class="row">
    <div class='col-3'>
      <h3>Title</h3>
      <img src="https://picsum.photos/200/300?image=0">
    </div>
    <div class='col-3'>
      <h3>Title</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p>lorem</p>
    </div>
    <div class='col-3'>
      <h3> title</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p></p>
    </div>
    <div class='col-3'>
      <h3>title</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p></p>
    </div>
    <div class='col-3'>
      <h3>title<br>long</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p></p>
    </div>
  </div>
</div>

Answer 2

CSS只改变了页面的风格。它不能改变DOM（文档对象模型）。您可以使用JS或一些这方面的服务器端代码。

Answer 3

你不能用CSS做到这一点，但你可以JavaScript做

例

// find elements
var banner = $("#banner-message > img")
var button = $("button")

// handle click and add class
button.on("click", function(){
  $(banner).wrap('<div class="new-parent"></div>');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <img src="https://i.imgur.com/CtZQRga.jpg" width="100" height="100" />
  <button>Change color</button>
</div>