CSS 函数 - attr()

CSS 中的attr()函数用于检索所选元素的属性值，并在以后将其用于样式表。attr()函数也可以用于伪元素，在这种情况下，该函数返回伪元素的源元素的属性值。

attr()函数可以与任何 CSS 属性一起使用，但对content属性的支持是完整的，而对 type-or-unit 参数的支持并不全面。

可能的值

attr()函数可以采用以下值作为参数。

attribute-name 值：列出在 CSS 中引用的 HTML 元素上的属性名称。

语法

attr(<attribute-name>)

CSS attr() - 内容属性

以下是一个 attr() 函数的示例。它将返回所选元素的属性值，在本例中是锚元素 (a)。

<html>
<head>
<style>
   a:before {
      content: attr(href) " ** ";
   }
   
   a {
      text-decoration-line: underline;
      color: red;
   }
</style>
</head>
<body>
   <h2>The attr() Function</h2>
   <p>Insert ** before the anchor element</p>
   <a href="https://tutorialspoint.com">
      Tutorialspoint
   </a>
</body>
</html>

以上示例在<a>元素的 href 属性之前添加了两个星号。它与 'content' 属性以及伪元素 ::before 一起使用。

CSS attr() - 使用“title”属性

以下是一个 attr() 函数的示例。它将返回缩写的“title”属性的值。

<html>
<head>
<style>
   abbr[title]:after {
      content: " (" attr(title) ")";
      background-color: aquamarine;
      font-size: 1.2rem;
   }
</style>
</head>
<body>
   <h2>"title" attribute of abbreviation</h2>
   <abbr title="Hyper Text Markup Language">
      HTML
    </abbr>
</body>
</html>

CSS attr() - 使用 @media 规则（打印页面）

以下是一个 attr() 函数的示例，其中超链接显示在页面的打印版本中。这是使用 @media 规则完成的。请查看示例

<html>
<head>
<style>
   @media print {
      a[href]:after {
         content: " (" attr(href) ")";
      }
   }
</style>
</head>
<body>
   <h2>hyperlink on print media</h2>
   <p>Press Ctrl+P to print the page and see the url of the link</p>
   <a href="www.tutorialspoint.com" target="_blank" rel="no-follow">Tutorials point</a>
</body>
</html>

CSS attr() - 使用自定义 HTML5 属性

以下是一个 attr() 函数的示例，其中定义了一个自定义属性 (sample-desc)。在列表中将某个值传递给此属性。显示相同的值，并且在未将值传递给自定义属性的列表项中返回空白。让我们看看示例

<html>
<head>
<style>
   li:after {
      content: " (" attr(sample-desc) ")";
      background-color: bisque;
   }
</style>
</head>
<body>
   <h2>custom data attribute of HTML5</h2>
   <ul>
      <li sample-desc="Cascading Style Sheets">
        CSS
      </li>
      <li sample-desc="Object-oriented Programming Language">
        JavaScript
      </li>
      <li>
        HTML
      </li>
      <li sample-desc="Web Browser">
        Chrome
      </li>
      <li sample-desc="Open-source JS Library">
        React
      </li>
    </ul>
</body>
</html>

打印页面