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>

我想使用css title

在<a href="link.com"></a>代码资本上设置所有text-transform: capitalize;

我们可以这样做吗？

Answer 1

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

＆＃13;

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()))
}

＆＃13;

<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>

＆＃13;

Answer 2

如果我错了，请纠正我，但有办法对此进行设计。

 a[title]{ text-transform: uppercase; }

您还可以使用它来获得更精确的样式：

a[href*="example"]{ text-transform: uppercase; }

这将选择具有属性href的所有url，并在其中包含单词example。您可以将此用作示例。

＆＃13;

a{ color: red; }
a[title]{ color: blue; }
a[title*="hi"]{ color: green; }
a[title="hi"]{ color: purple; }

＆＃13;

<a title="hi">Hi</a>
<a title="hi there">Hi</a>
<a title="there">Hi</a>
<a>Hi</a>

＆＃13;

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

2 个答案: