あなたがおそらく知らなかったCSSトリック.

今日、私はあなたといくつかのクールな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;
}

::選択.
Use : Select擬似要素は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;
}

Webテキストへのストロークの追加

<h2>Css is Awesome</h2>

h2 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px tomato;
}