Question

我使用Marked降价解析器解析降价内容。它会将每个新行显示为段落标记。

因此，如果有图像标记，则会将其显示为

<p><img src="url" /></p>

如果它只包含文本，则显示为

<p>Sometext</p>

我想要的是包含img标签的段落标签，其左边的填充为0，而段落标记的文本只有填充左边的x值。

这只能使用css吗？或者我是否也必须使用javascript？

Answer 1

使用CSS会有一个父选择器，它不存在，所以你需要脚本。

使用ToShortDateString()，您可以执行此操作

＆＃13;

querySelectorAll

＆＃13;

(function() {
  window.addEventListener("load", function() {
    var p_with_img = document.querySelectorAll('p img');
    for (var i = 0; i < p_with_img.length; i++) {
      p_with_img[i].parentNode.classList.add('p_with_img'); 
    }
  }, false);
}());

＆＃13;

p {
  padding-left: 30px;
  border: 1px solid gray;
}

.p_with_img {
  padding-left: 0;
}

＆＃13;

更新

根据内容的结构，单独使用CSS就有这种可能性，你可以在匹配填充集的图像上设置负边距。

＆＃13;

<p><img src="url" alt=""></p>

<p>Sometext</p>

＆＃13;

p {
  padding-left: 30px;
  border: 1px solid gray;
}

p > img {
  margin-left: -30px;
}

＆＃13;

Answer 2

目前CSS不支持父选择器。但是你可以指定p标签中包含的图像，使其具有左边的填充：

p > img { padding-left:1rem;}

Answer 3

你不能只使用CSS。您将不得不在此使用javascript。

规格：https://www.w3.org/TR/css3-selectors/#selectors

JavaScript的：

var images = document.querySelectorAll('p img');

for (var i = 0; i < images.length; i++) {
    var currentImage = images[i];
    currentImage.style.padding = '20px';
}

CSS：

p {
    padding: 30px;
}

CSS规则取决于内容

3 个答案: