最後に、リストの弾丸の色を簡単に変更できます

私の発芽の年に、一般的なアドバイスはこれでした：

• リスト項目

 li {color：red; } /* 弾丸 */
li span {color：black; } /* 文章 */

ひどくはありませんが、素晴らしいことではありません。スパンレベルですべてを「リセット」しているので、より複雑になります。

物事ははるかに簡単になっています。私たちが行くにつれて、この世界を散歩しましょう。

別の方法では、デフォルトのリストのスタイリングを剥がし、それを擬似要素に置き換えることでした。

 ul {
  リストスタイル：なし;
}

li :: before {
  コンテンツ： "• ";
  色：赤;
}

カウントする必要がある場合は、CSSカウンターでそれを行うことができます。

 ol {
  リストスタイル：なし;
  カウンターレスセット：私の絶妙な店。
}

ol li {
  カウンターインクリメント：私のうんざりした店。
}

ol li :: before {
  コンテンツ：カウンター（my-awesome-counter） "。";
  色：赤;
}

ここで簡単には：これは色には役立ちませんが、次のような文字列を設定することで、弾丸に使用するキャラクターを指定できます。

 ul {
  リストスタイルタイプ： '✽';
}

これは、Firefox 39（2015）およびChrome 79（2019年12月9日に登場）のようです。

注文されたリストには、言語固有のオプションがたくさんあります。また、これらの言語スタイルはCSSカウンターでも機能します。これについては、Hui JingのDeep Diveで詳しく知ることができます。

しかし、その間ずっと、私たちは愚かな弾丸（またはそれが何であれ）を選択し、それをスタイリングしたかっただけでした。今、私たちはまさにそれができるようになり始めています。

Firefox 68（2019年7月）の時点で、あなたは次のようにできます。

 li ::マーカー{
  色：赤;
  コンテンツ： "►";
}

…ご覧のとおり、それは間違いなく最もきれいで最も簡単な方法である色と弾丸のものを変えるので、進歩を見るのは素晴らしいことです。

Tejasは示しています：

ManuelMatuzovićは、要素をリスト項目ディスプレイタイプに設定すると、マーカーも使用できると指摘しています。

 H2 {
  表示：list-item;
}

H2 ::マーカー{
  色：オレンジ;
  コンテンツ：「☞」;
}

Safariでさえ、この執筆時点でサポートがあるので、ここでChromeに頼る必要があります。

このブラウザサポートデータはCaniuseからのもので、詳細があります。数字は、ブラウザがそのバージョン以降の機能をサポートしていることを示しています。

デスクトップ

モバイル /タブレット

以上が最後に、リストの弾丸の色を簡単に変更できますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。