如何将CSS应用到不在某个标记内的文本?

cs7cruho  于 2022-11-19  发布在  其他
关注(0)|答案(4)|浏览(168)
<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本身?

tkclm6bt

tkclm6bt1#

“This is not a div”没有CSS选择器,因为CSS选择器不能指向DOM #text节点,只能指向元素和伪元素(例如::before::first-line)。
但你可以这样做:

body {
    padding-left: 100px;
}

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

dohp0rv52#

根据您的应用程序/站点中的元素,您也可以简单地使用:not选择器,它实际上是一个通过CSS存在的选择器。
例如以下CSS...

div *:not(p) em {…}

Will选择元素(不是p元素)和div元素中的所有em元素。

nxowjjhe

nxowjjhe3#

您不能以这种方式应用CSS,但可以使用负边距:
第一个

ccgok5k5

ccgok5k54#

我不会在正文中使用这样的边距,因为它可能会干扰你可能想做的其他事情。你应该以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>

相关问题