CSS 选择器 - 使所有标题大写

Question

嘿，我有一个问题。我们如何更改我们想要的元素的标题样式？像这样的例子:

<ul>
  <li><a href="#!" title="instagram link"><i class="fab fa-instagram"></i></a></li>
  <li><a href="#!" title="facebook link"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="#!" title="linkedin link"><i class="fab fa-linkedin-in"></i></a></li>
  <li><a href="#!" title="twitter link"><i class="fab fa-twitter"></i></a></li>
</ul>

我想制作所有 title在 <a href="link.com"></a>使用 css 标记首都 text-transform: capitalize;

我们能做到吗？

Answer 1

没有办法用 CSS 做到这一点，但这里有一个小的 JS 脚本来转换你的标题:

var e = document.querySelectorAll('ul li a');
for(var i=0;i<e.length;i++) {
  e[i].setAttribute('title',e[i].getAttribute('title').replace(/\b\w/g, l => l.toUpperCase()))
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
<ul>
  <li><a href="#!" title="instagram link"><i class="fab fa-instagram"></i></a></li>
  <li><a href="#!" title="facebook link"><i class="fab fa-facebook-f"></i></a></li>
  <li><a href="#!" title="linkedin link"><i class="fab fa-linkedin-in"></i></a></li>
  <li><a href="#!" title="twitter link"><i class="fab fa-twitter"></i></a></li>
</ul>