logo标签列表

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

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

我该用什么替换(All but div)，才能为文本"This is not a div"左侧应用100px的内边距，而不移动实际的蓝色div本身？

我在ms paint中快速绘制的示例

我认为有更好的方法来实现你想要的外观，但你可以尝试以下代码：body{ margin-left: 100px;} .bluediv{padding-left:-100 px;} - MMallette
这是不可能的，除非有第二个规则来“撤销”对嵌套的 div 的影响。 - Dai
我会简单地使用一个不同的 div 并针对它进行定位。直接将奇怪的 CSS 应用于 Body 是一个不好的想法。 - Stephen R
4个回答
2

根据您的应用程序/网站中的元素，您还可以简单地使用:not选择器，它实际上是CSS中已经存在的选择器。

例如，以下CSS...

div *:not(p) em {…}

Will选择所有在一个元素中（不是p元素）且在div元素中的em元素。因此，在这种情况下，<div><strong><em>…</em></strong> 是匹配的，但是<div><p><em>…</em></p></div> 不是。
1
由于CSS选择器只能选中元素和伪元素（例如::before和::first-line），而不能选中DOM #text节点，因此“这不是一个div”的CSS选择器不存在。但你可以尝试以下方法：
body {
    padding-left: 100px;
}

body > div {
    margin-left: -100px;
}
说 CSS 不能定位 DOM 是相当不正确的...它实际上使用 DOM 来查找和选择特定元素以应用样式。 - CaliCo
1
@CaliCo 我说 CSS 不能针对 DOM 中的 #text 节点进行定位，而不是它"不能针对 DOM 进行定位"。 - Dai
0

你不能以那种方式应用CSS，但是你可以使用负边距：

body {
    padding-left: 100px;
}
    
div {
  margin-left: -100px;
  background-color: lightblue;
}
<html>
<body>
  <div>This is a div</div>
  This is not a div
</body>
</html>

1
谢谢！我会尽快将您的答案标记为正确！ - CookiePanda
0

我不会在 body 上使用 margin，因为它可能会干扰您想要执行的其他操作。您应该针对 CSS 进行定位，使其尽可能本地化。使用 span，然后添加左边距或填充。

<html>
<head>
<style>

(All but div) {
padding-left: 100px;
}
span{
margin-left:50px;
padding-left:50px;
border:solid 1px black;}

</style>
</head>
<body>

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

</body>
</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接