在 HTML 页面上的 CSS 中创建样式别名答案

【问题标题】：Creating style alias in CSS on HTML page在 HTML 页面上的 CSS 中创建样式别名
【发布时间】：2016-02-02 07:35:43
【问题描述】：

我想在动态构建的 HTML 页面上选择性地停止与

命令关联的换行符，并使用一种样式来执行此操作。我知道

   p {
   display: inline
    }

可以这样做，但我不想在整个页面中不断添加此标签。

有没有一种方法可以创建 p 标签的别名，或者以某种方式创建另一个将调用样式的标签。

例如（我知道这段代码行不通），比如

  <style type="text/css">
  stop-p-lf {
     p {
       display: inline
     }
  }
  </style>

然后在我的 HTML 中我只是使用这样的标签..

  <stop-p-lf>the next p tag will not line feed <p> 
   but the one after this</stop-p-lf> <p> will

我希望使用这些标签来简化可读性并减少整个 html 的编码量。

有没有办法做到这一点？

【问题讨论】：

标签： html css tags

【解决方案1】：

您不能创建自己的标签，但可以使用 CSS 类来创建。例如：

.stop-p-lf p { display: inline; }

然后在 HTML 中：

<div class="stop-p-lf"><p>This will be inline</p></div><p>And this don't</p>

【讨论】：

严格来说你可以用javascript创建元素，所以这并不完全正确。 document.createElement('x-foo')，然后将其实例化并添加到 DOM 中，确实上面列出的元素是完全有效的。但是，显然在这种情况下最好使用一个类。
@ToddMoore 在 HTML 中你也可以用几乎相同的方式创建元素，但它不适用于 W3C。
这是不正确的，你不能只在静态 HTML 中创建一个元素，你是对的，它是无效的。但是，通过 javascript 动态创建元素是完全有效的，尤其是现在使用 WebComponent 规范。我的观点是说你不能创建自己的标签是不正确的。它给人的印象是 DOM 是固定的，如果不是，则不灵活。
这似乎是最简单的解决方案...也考虑了模板和 webcomponent 功能

【解决方案2】：

就那样做吧：

<span class="stop-p-lf"><p>Some text here</p></span><p>And some here</p>

这样你可以选择你想要使用 CSS 的 <p> 标签：

p{
    color:blue;
}
.stop-p-lf p{
    color:red;
}

【讨论】：