你可能不知道的CSS小技巧。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
今天我将和大家分享一些很棒的CSS选择器。
我们先从计数器开始。
要设置编号列表中数字的样式，我们需要使用名为 CSS 计数器的属性。CSS 计数器允许您根据内容在文档中的位置调整其外观。
<ul class="list">
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
li {
font-size: 40px;
margin-bottom: 20px;
counter-increment: li;
}
.list li::before {
content: counter(li);
margin-right: 10px;
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-block;
background-color: #f3b70f;
color: white;
text-align: center;
line-height: 50px;
}
::选择。
::selection 伪元素用于 DOM 中高亮显示的元素。这是我最喜欢的伪元素之一。它的语法如下：
p::selection {
color: white;
background-color: green;
}
接下来是attr()函数。
它用于检索所选元素的属性值，并在样式表中使用该值。
<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>
.title {
font-size: 35px;
letter-spacing: 3px;
}
.title::before {
content: attr(data-count);
font-size: 1.2em;
color: steelblue;
margin-right: 10px;
}
为网页文本添加描边
<h2>Css is Awesome</h2>
h2 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 3px tomato;
}
