html - 我怎样才能有一个基本标题和一个自定义标题？

Question

我有以下 CSS 来制作一个 H1，它有一条线穿过背景并且居中。我必须在我的 h1 标签之间使用一个 span 元素，它才能工作。

CSS 是

h1 {
    font-size: 28px;
    font-family:'Palatino';
    font-style: italic;
    font-weight:600;
    color: #2D6A97;
    margin-bottom:60px;
    position:relative;
    text-align:center;
}

h1 span {
    background:#FDFCF8;
    padding: 0 15px;
    position: relative;
    z-index: 1;
}

h1:before {
    background:#E5DEC6;
    content: "";
    display:block;
    height: 1px;
    position:absolute;
    top:50%;
    width:100%;
}

h1:before {
    left: 0;
}

不过在其他页面上，我只需要一个普通的 H1(没有任何 CSS)。

我怎样才能改变我所拥有的，使无样式的 H1 看起来仍然正常？

理想情况下，我希望能够执行以下操作:

   <h1 class="withborder"><span>Here's my H1</span></h1>

Answer 1

你已经回答了:

• 你需要给你的h1
一个类

但是如果你想让你的 h1 保持非样式化然后在 CSS 中，你必须将样式应用到类而不是 h1，否则它将应用于元素中的所有 h1。

.class {
  font-size: 28px;
  font-family: 'Palatino';
  font-style: italic;
  font-weight: 600;
  color: #2D6A97;
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}
.class span {
  background: #FDFCF8;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
.class::before {
  background: #E5DEC6;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0
}

<h1><span>Here's my H1 non-styled</span></h1>
<h1 class="class"><span>Here's my H1 styled</span></h1>