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等，但是他们似乎并没有解决问题。

编辑

这是问题所在。我正在使用网格（有点像照相馆），并希望在每个项目周围增加边距。这是Bootstrap 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>

使用选择器将内容包装在div中

编辑

3 个答案: