使用 css 在 html 中自动缩进行

Question

此代码的预期结果是根据前一个同级元素自动缩进行。现在我能做的最好的事情是硬编码 CSS classes，我已将其包含在下面的示例中。

如果可能的话，我希望文本在开始 class 时缩进，在结束时缩进 class。虽然真的，任何东西都会比我现在拥有的更好。我希望我可以复制目前有多少网站构建可见代码，就像上面输入的那样 HTML。

.cd_tag {
  text-align: left;
  color: black;
  height: auto;
  width: 80%;
  outline-color: black;
  outline-width: 2px;
  outline-style: dotted;
  background-color: rgb(238, 238, 238);
}


/* html text(default text) */
.ht_txt {
  color: black;
}


/* html tag styling */
.ht_tag {
  color: red;
}


/* add < & >, encapsulting html tags */
.open::before {
  font-weight: lighter;
  content: "<"
}

.open::after {
  font-weight: lighter;
  content: ">";
}

.close::before {
  font-weight: lighter;
  content: "</"
}

.close::after {
  font-weight: lighter;
  content: ">"
}


/* a couple tab classes to make the structure easier to read */
.tab1 {
  margin-left: 2rem;
}

.tab2 {
  margin-left: 4rem;
}

.tab3 {
  margin-left: 6rem;
}

.tab4 {
  margin-left: 8rem;
}

.tab5 {
  margin-left: 10rem;
}

.tab6 {
  margin-left: 12rem;
}

<div class="cd_tag">
  <div class="ht_tag">
    <div class="open">!DOCTYPE html</div>
    <div class="open tab1">html</div>
    <div class="open tab2">head</div>
    <div class="open tab3">style</div>
    <div class="close tab3">style</div>
    <div class="close tab2">head</div>
    <div class="open tab2">body</div>
    <div class="close tab2">body</div>
    <div class="close tab1">html</div>
  </div>
</div>

Answer 1

编辑：

实际上，如果您使用CSS counter() function.

您可以分别为每个 .open 和 .close 元素递增和递减计数器。然后你可以使用 @counter-style CSS at-rule to create a custom counter style. Setting the system to symbolic will let you output N number of a specified symbol, where N is equal to the counter's value. Setting symbols 到几个 non-breaking 空格让计数器充当压头，将元素的内容缩进到正确的级别：

@counter-style custom {
  system: symbolic;
  symbols: '0303';
}
.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 1rem 1rem 1rem 0;
  font-family: monospace;
  counter-set: level 0;
}
.open,
.close {
  color: #b75301;
}
.open:first-child,
:not(.close) + .open,
.content {
  counter-increment: level 1;
}
:not(.open) + .close {
  counter-increment: level -1;
}
.open:before,
.open:after,
.close:before,
.close:after {
  color: black;
}
.open:after,
.close:after {
  content: '>';
}
.open:before {
  content: counter(level, custom) '<';
}
.close:before {
  content: counter(level, custom) '</';
}
.content:before {
  content: counter(level, custom);
}

<div class="parent">
  <div class="open">html</div>
  <div class="open">head</div>
  <div class="open">style</div>
  <div class="close">style</div>
  <div class="close">head</div>
  <div class="open">body</div>
  <div class="open">p</div>
  <div class="content">Lorem Ipsum</div>
  <div class="close">p</div>
  <div class="close">body</div>
  <div class="close">html</div>
</div>

上一个回答：

使用 adjacent sibling selector 在技术上是可行的，但您必须为前面类的每个可能组合添加样式（见下文）。不可能（没有 javascript）仅使用 CSS.

计算元素前的网络“打开”和“关闭”

您最好还是像现在这样使用 .tab-* 类。不过，您可以使用 javascript 自动添加它们，以简化操作。

/* probably don't do this */
.open + .open {
  margin-left: 2rem;
}
.open + .open + .open {
  margin-left: 4rem;
}
.open + .open + .open + .open {
  margin-left: 6rem;
}
.open + .open + .open + .open + .close {
  margin-left: 6rem;
}
.open + .open + .open + .open + .close + .close {
  margin-left: 4rem;
}
.open + .open + .open + .open + .close + .close + .open {
  margin-left: 4rem;
}
.open + .open + .open + .open + .close + .close + .open + .close {
  margin-left: 4rem;
}
.open + .open + .open + .open + .close + .close + .open + .close + .close {
  margin-left: 2rem;
}

.cd_tag {
  text-align: left;
  color: black;
  height: auto;
  width: 80%;
  outline-color: black;
  outline-width: 2px;
  outline-style: dotted;
  background-color: rgb(238, 238, 238);
}


/* html text(default text) */
.ht_txt {
  color: black;
}


/* html tag styling */
.ht_tag {
  color: red;
}


/* add < & >, encapsulting html tags */
.open::before {
  font-weight: lighter;
  content: "<"
}

.open::after {
  font-weight: lighter;
  content: ">";
}

.close::before {
  font-weight: lighter;
  content: "</"
}

.close::after {
  font-weight: lighter;
  content: ">"
}

<div class="cd_tag">
  <div class="ht_tag">
    <div class="open">!DOCTYPE html</div>
    <div class="open">html</div>
    <div class="open">head</div>
    <div class="open">style</div>
    <div class="close">style</div>
    <div class="close">head</div>
    <div class="open">body</div>
    <div class="close">body</div>
    <div class="close">html</div>
  </div>
</div>

使用 css 在 html 中自动缩进行

Auto indenting lines in html using css

html

css

text-styling