Question

<html>
<head>
<style>

(All but div) {
padding-left: 100px;
}

</style>
</head>
<body>

<div style="background-color: blue;">This is a div</div>
This is not a div

</body>
</html>

我可以替换（除了div之外的所有内容），在文本左侧应用100px填充，“这不是div”，而不移动实际的蓝色div本身？

Example I quickly threw together in ms paint

Answer 1

“这不是div”没有CSS选择器，因为CSS选择器不能定位DOM #text节点，只能定位元素和伪元素（例如::before和::first-line）。

但你可以这样做：

body {
    padding-left: 100px;
}

body > div {
    margin-left: -100px;
}

Answer 2

我不会在身体上使用这样的保证金，因为它可能会干扰您可能想要做的其他事情。您应该定位css，使其尽可能本地化。使用span，然后添加左边距或填充

＆＃13;

<html>
<head>
<style>

(All but div) {
padding-left: 100px;
}
span{
margin-left:50px;
padding-left:50px}

</style>
</head>
<body>

<div style="background-color: blue;">This is a div</div>
<span>This is not a div<span>

</body>
</html>

＆＃13;

Answer 3

您不能以这种方式应用CSS，但可以使用负边距：

<html>
<head>
<style>
body {
    padding-left: 100px;
}

div {
  margin-left: -100px;
}
</style>
</head>
<body>

<div style="background-color: blue;">This is a div</div>
This is not a div

</body>
</html>

结果：https://codepen.io/cmbuckley/pen/zjOXWN

Answer 4

根据应用程序/站点中的元素，您还可以使用：not selector，它实际上是通过CSS的现有选择器。

例如以下CSS ...

div *:not(p) em {…}

将选择元素（不是p元素）和div元素中的所有em元素。因此，在这种情况下<div><strong><em>…</em></strong>是匹配，但是<div><p><em>…</em></p></div> is not.

如何将CSS应用于不在某个标签内的文本？

4 个答案: