h1 标签类（备用）

问题描述 投票：0回答：8

我知道 h1 标签对于 SEO 很重要，所以我所有的标题都是 H1（太棒了！）

现在，我需要在某些页面上有一个稍微不同的标题（作为文本的第一行）。

通常，我只是将 h1 复制为 h2 并备用。

问题：是否可以在标题标签中添加一个类...（我尝试过但没有成功）

html css seo
8个回答
21
投票

您可以像这样设置标题样式：

h1 { color: red; }

或者像这样：

<h1 class="fancy">Fancy</h1>

.fancy { font-family: fantasy; }

如果不起作用：

  • 检查您没有缓存旧的样式表（ctrl-F5 重新加载）
  • 检查您没有任何规则覆盖您的类（使用 Firebug 或类似工具进行检查在这里非常有帮助）。
  • 检查 HTML 和 CSS 中的拼写错误

编辑：

听起来你有 

h1 .myClass
而不是 
h1.myClass
- 有一个重要的区别：

h1 .myClass { } /* any element with class="myClass" within an <h1> */
h1.myClass  { } /* any <h1> with class="myClass" */
14
投票

当然可以：

<h1 class="someclass">…</h1>


class
属性是核心属性的属性组coreattrs中的一个，可以与
h1
元素一起使用。

8
投票

听起来您正在对页面上的所有标题使用 

h1
。通常，您会在页面上有一个 
h1
标签来表示页面包含的内容（文本至少部分匹配页面标题），并使用较小的标题标签来表示内容不同部分的标题。这样，您就可以向搜索引擎提供有关页面上重要内容的大部分信息。当然有些页面不适合这个模型，但很多页面都适合。

您可以通过多种不同的方式指定标题样式。例如：

对于所有 

h1
标签：

h1 { font-weight: bold; }

对于所有 

h1
和 
h2
标签：

h1, h2 { margin: 10px; }

对于带有 

h1
的元素内的所有 
id="main"
标签：

#main h1 { background: #ccc; }

对于所有带有 

h2
的 
class="Info"
标签：

h2.Info { color: #000; }

对于带有 

h3
的元素内的所有 
class="More"
标签：

.More h3 { text-decoration: underline; }
3
投票

您可以将类添加到

<h1>
标签。像这样：

<h1 class="myclass"> ... </h1>

您可以轻松地设计它的样式：

<style type="text/css">
.myclass { color : green }
</style>
1
投票

以下应该有效：

<html>
<head>
<style type="text/css">
h1.custom {
    color: red;
    font-size: 16px;
}
</style>
</head>
<body>

<h1 class="custom"> test </h1>
</body>
</html>
0
投票

< title > 标签位于您的 < head > 部分，因此向其添加类并没有真正意义。

不过，您可以向 < h1 > 标签添加一个类。

<h1 class="title">
0
投票

<div class='row' id='content-wrapper'>
  <div class='clear'/>
  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
  <div id='error-wrap'>
      <h1 class='error-item'>404</h1>
      <h2>Page Not Found!</h2>
      <p>Sorry, the page you were looking for in this blog does not exist.</p>
      <div class='clear'/>
    <a class='homepage' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Go To Home</a>
  </div>
0
投票

当 HTML 为 

h1.myClass
时，请考虑两个选择器 
.myClass
和 
<h1 class=myClass>...</h1>
。

这两个选择器的工作方式有一个重要的区别。在多年使用两者作为同义词后我才意识到这一点。

在第一种情况下，

h1.myClass
的规则优先于 h1 的任何其他规则。在第二种情况下，
h1
（如果有）的规则优先于
.myClass
中的规则（除非它们被标记为
!important
）。 “优先”意味着如果两个规则中存在相同的属性，则应用具有优先权的规则。另一条规则被忽略。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.