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

Was könnte ich ersetzen (Alle außer div), um links eine 100-Pixel-Auffüllung auf den Text "Dies ist kein Div" anzuwenden, ohne das tatsächliche blaue Div selbst zu verschieben?

Example I quickly threw together in ms paint

2
CookiePanda 18 Apr. 2018 im 00:42

4 Antworten

Beste Antwort

Sie können CSS nicht auf diese Weise anwenden, aber Sie können negative Ränder verwenden:

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

Ergebnis: https://codepen.io/cmbuckley/pen/zjOXWN

0
cmbuckley 17 Apr. 2018 im 21:47

Es gibt keinen CSS-Selektor für "Dies ist kein Div", da CSS-Selektoren nicht auf DOM #text -Knoten abzielen können, sondern nur auf Elemente und Pseudoelemente (z. B. ::before und ::first-line).

Aber Sie können dies tun:

body {
    padding-left: 100px;
}

body > div {
    margin-left: -100px;
}
1
Dai 17 Apr. 2018 im 21:48

Ich würde keinen solchen Rand für den Körper verwenden, da er andere Dinge stören könnte, die Sie vielleicht tun möchten. Sie sollten das CSS so ausrichten, dass es so lokal wie möglich ist. Verwenden Sie die Spanne und fügen Sie dann den linken Rand oder die Polsterung hinzu

<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>
1
DCR 17 Apr. 2018 im 21:54

Abhängig von den Elementen in Ihrer Anwendung / Site können Sie auch einfach den Selektor: not verwenden, bei dem es sich tatsächlich um einen vorhandenen Selektor über CSS handelt.

Zum Beispiel das folgende CSS ...

div *:not(p) em {…}

Will wählt alle em-Elemente aus, die sich in einem Element befinden (das kein p-Element ist) und die sich in einem div-Element befinden. In diesem Fall ist <div><strong><em>…</em></strong> also eine Übereinstimmung, aber <div><p><em>…</em></p></div> is not.

0
CaliCo 17 Apr. 2018 im 22:06