时间戳

首页 > 解决方案 > 如何使用 CSS 选择器从类中提取子字符串？

html - 如何使用 CSS 选择器从类中提取子字符串？

问题描述

我有一个 Hugo 生成的静态网站，在每个代码片段中，我想将语言名称放在右下角。

我已经能够使用 CSS 选择器language-x在标签中获取整个类 ( )，code但我只想从类名中捕获语言名称，而不是整个类。

这是迄今为止我所拥有的最小工作示例：

https://codepen.io/anon/pen/gZWWNP

<html>

<style>
pre {
    background: #26282C;
    color: #fff;
    text-align: left;
    padding: 0.5em;
    padding-left: 0.5em;
    padding-left: .8em;
    word-break: break-all;
    white-space: pre-wrap;
    overflow: auto;
    tab-size: 4;
    margin-bottom: 20px;
    border-left: 5px solid #F27563;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

code[class*="language-"]:after,
pre[class*="language-"]:after {
  content: attr(class);
  color: #fff;
  font-size: smaller;
  font-weight: bold;
  display: block;
  text-align: right;
  padding-top: 5px;
}
</style>

<body>

<pre>
<code class="language-perl6">class Person {
    has Str $.firstname;
    has Str $.lastname;
    has Str $.age;
}
</code>
</pre>

</body>
</html>

在这种情况下，language-perl6我不想只显示perl6. 除了 CSS 或可能是 vanilla JS 之外，我希望在不使用任何其他工具的情况下尽可能地减少这一点。

标签： htmlcss

解决方案

content不幸的是，您无法更新该值，但您可以attr通过 javascript 创建一个新值并在您的 CSS 中使用它。我在您的 CSS - 中引用了一个新属性content: attr(short-lang);，然后编写了一些纯 JavaScript 来转换您的类并将其分配给新属性。

我已经创建了代码，因此它适用于pre和code元素，因为这是您的 CSS 建议所需要的。我pre在演示中添加了一个类。

我会认真考虑将语言存储在它自己的属性中，而不是作为一个类，就像你必须添加任何其他类一样，这段代码也会显示这些类。

// Get all code and pre elements
var elements = document.querySelectorAll('code,pre');

// Cycle through each code element
for (var i = 0; i < elements.length; i++) {

    // Load language from class
    var lang = elements[i].getAttribute("class");
    
    // Remove 'language-' if lang is not empty
    if (lang != null ) {
      lang = lang.substr(lang.length - (lang.length-9));
    }
    
    // Create 'short-lang' parameter for element
    elements[i].setAttribute("short-lang", lang);
    
}
pre {
    background: #26282C;
    color: #fff;
    text-align: left;
    padding: 0.5em;
    padding-left: 0.5em;
    padding-left: .8em;
    word-break: break-all;
    white-space: pre-wrap;
    overflow: auto;
    tab-size: 4;
    margin-bottom: 20px;
    border-left: 5px solid #F27563;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

code[class*="language-"]:after,
pre[class*="language-"]:after {
  content: attr(short-lang);
  color: #fff;
  font-size: smaller;
  font-weight: bold;
  display: block;
  text-align: right;
  padding-top: 5px;
}
<html>


<body>

<pre>
<code class="language-perl6">
class Person {
    has Str $.firstname;
    has Str $.lastname;
    has Str $.age;
}

</code>

</pre>

<pre class="language-perl9">
class Person {
    has Str $.firstname;
    has Str $.lastname;
    has Str $.age;
}


</pre>

</body>
</html>

推荐阅读