給所有的標題HTML元素添加CSS類？ -有解無憂

我目前正在為一些學校的作業制作一個網站。我使用Wordpress和Divi主題。

在網上我發現了一些CSS代碼，它可以讓我在文本下添加一條彩色的線。我已經在我的所有標題上使用了這個代碼。

下面是我的標題的一個例子。

uj5u.com熱心網友回復：

我假設你沒有理解我之前的評論，所以這是一個解釋。標簽header不只是文字，它是一個完整的width:auto的盒子，你可以在上面的圖片中看到（第二個背景）。在你發送的代碼中，你給標題h2的下劃線效果 "box-shadow"，正如解釋的那樣，這將給整個盒子帶來效果。你寫在h2內的文字是在span標簽內，它將只覆寫文字而不是整個盒子，所以只給span標簽賦予效果將解決你的問題，關于其他h2標簽沒有得到下劃線，是因為你把效果切換到span，所以你也必須把其他h2放在span里。由于你想添加不同屬性的h3，最佳的方法是為所有的標題添加span 為h2添加不同于h3的類名或id，并使用該類名或id來設定CSS。例如：
```
HTML。
<h2><。 span id="TextInsideH2" class="pa-color-highlight" > Background</span></h2>
<h3>< span id="TextInsideH3" class="pa-color-highlight" > Background</span></h3> 

CSS。
#TextInsideH2{css屬性在此}。
#TextInsideH3{這里有不同的css屬性}。
```
uj5u.com熱心網友回復：

如前所述，跳過span部分，直接應用到h2上。標題元素默認是塊級的，這就是為什么你看到背景/脂肪下劃線延伸到整個父元素。你必須添加display:ine-block;, display:ine-flex;或display:table;，例如，讓下線只覆寫h2文本的寬度：
```
h2 {
  display:inline-block;
  text-decoration: none;
  box-shadow: inset 0 -.4em 0 rgba(48, 227, 255, 1);
  顏色：繼承。
}
```
由于不知道你的標記的其余部分是怎樣的，這應該可以作為你的一個解決方案。如果你想深入挖掘，你可以用偽元素獲得這種效果。這將使你更好地控制你希望那條線/背景看起來如何。下面是一個例子：

。
```
span class="hljs-selector-tag">h2 {
  position: relative;
  display: inline-block;
}

h2: :before {
  content:''/span>。
  position: absolute;
  bottom:-2px;
  left:-5px;
  right:-5px;
  height:14px;
  background: linear-gradient(to bottom, rgb(48, 227, 255), rgba(32, 160, 255) 。)
  z-index：-1。
}
```
```
< h2>Background</h2>
<p>一個段落</p> 
```
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>

這里有一些更多的資訊，偽類可以做什么。CSS-tricks

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/321904.html
標籤：

上一篇：在一列中固定字母
下一篇：使用regex從"/:id="格式的URL中獲取正確的引數值