如何将相同的样式应用于所有属性标签？答案

【问题标题】：How to apply the same style to all atribute tags?如何将相同的样式应用于所有属性标签？
【发布时间】：2021-07-23 20:18:46
【问题描述】：

我在vue.js 文件中有这个：

 <a
          href="#"
          class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700"
        >
          Installation
        </a>
        <a
          href="#"
          class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700"
        >
          Release Notes
        </a>
        <a
          href="#"
          class="my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700"
        >
          Upgrade Guide
        </a>

我想删除这些类或至少缩短它们：

 <a
          href="#"
        >
          Installation
        </a>
        <a
          href="#"
        >
          Release Notes
        </a>

我尝试将它们放在<div 之间，但没有显示任何内容。

【问题讨论】：

你能用你想要的样式创建一个像 .my-great-link 这样的类，然后使用它吗？否则，如果框架添加了自己的类，您可以检查 HTML 并找到框架应用于这些锚点的类，并将您的额外样式直接应用于它们的类。

标签： html css vue.js tailwind-css

【解决方案1】：

我看到您的标签中列出了“html”和“css”。我以前没有用过 vue，虽然我知道 Javascript。

我建议您创建一个带有自定义类的 CSS 文件并在您的 html 页面中引用该自定义类。这是一个示例网页：

HTML 文件：

<html>
    <head>
        <link rel="stylesheet" href="Content/Site.css" type="text/css" />
    </head>
    <body>
        <a href="#" class="my-custom-class">Installation</a>
        <a href="#" class="my-custom-class">Release Notes</a>
        <a href="#" class="my-custom-class">Upgrade Guide</a>
    </body>
</html>

这里是引用的关联 CSS 文件（注意：CSS 文件位于根目录内的“Content”文件夹中）：

/*Site.css*/

.my-custom-class {
    color: gray;
    font-weight: bold;

}

.my-custom-class:hover {
    font-weight: normal;
}

我希望这会有所帮助！如果您有任何其他问题或疑虑，请告诉我。

编辑

根据请求，我正在制作一个可选的 CSS 文件来选择我们想要影响的元素，而无需在 html 中指定类。

CSS：

/Site.css/

body > a {
    color: gray;
    font-weight: bold;

}

body > a:hover {
    font-weight: normal;
}

如果您使用这种元素选择方法，那么您可以安全地从 HTML 文件中的每个元素中删除 class 属性。

如果您有任何其他问题或疑虑，请告诉我。

【讨论】：

【解决方案2】：

您可以在主（未编译的）CSS 文件中使用 @apply 在 Tailwind 中提取一组类。有关更多详细信息和示例，请参见此处：https://tailwindcss.com/docs/extracting-components#extracting-component-classes-with-apply

对于您的示例，您可以在 CSS 文件中执行以下操作：

.link {
    @apply my-3 block text-gray-300 hover:text-gray-100 text-sm font-medium duration-700;
}

并将您的 HTML 更新为这样的内容以使用提取的类：

<a href="#" class="link">
    Installation
</a>
<a href="#" class="link">
    Release Notes
</a>

【讨论】：