我有以下 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>
最佳答案
你已经回答了:
- 你需要给你的
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>
关于html - 我怎样才能有一个基本标题和一个自定义标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37286204/