代码之家 › 专栏 › 技术社区 › dotNET

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

css-selectors css html

dotNET · 技术社区 · 6 年前

我不知道如何更好地表达它。我可以使用CSS选择器插入额外的包装器吗 <div> 围绕目标内容 <部门> ?

假设我的页面如下所示:

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

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

这可以通过css选择器或psuedo选择器实现吗?我调查 before , after first-child 等等,但他们似乎没有做到这一点。

编辑

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

这将创建一个4列网格。在父div(col-3)上添加边距会影响网格本身(我理解为什么会发生这种情况)。我也不能向内容元素添加边距/填充(因为它们是多个元素)。所以我想如果我能注射一个“包装器”会很容易 div 围绕内容并为其添加边距。不幸的是,这似乎现在也不可能了。

3 回复 | 直到 6 年前

Temani Afif 6 年前

您要将其转换为:

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

jiwopene 6 年前

CSS只改变页面的样式。信息技术更改DOM(文档对象模型)。您可以使用JS或一些服务器端代码来实现这一点。

Fatihi Youssef 6 年前

你不能和我一起做 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>