背景: li の前にドットを追加し、:hover をトリガーして色を変更する方法。概略図は次のとおりです。
1. コード
HTML:
<ul>
<li><a href="#">纯CSS ul li前点加颜色和变色(不使用背景图)</a></li>
<li><a href="#">纯CSS ul li前点加颜色和变色(不使用背景图)</a></li>
</ul>
CSS:
.ul li{list-style-type: square;color: #0099ff;font-size: 16px;line-height: 30px;}
.ul li a{color: #333;font-size: 14px;}
.ul li:hover{color: #ff6900;}
.ul li:hover a{color: #ff6900}
2、分析
コードの最初の行:
list-style-type: square; は接頭辞の四角い点を追加することですが、丸い点を追加したい場合はどうすればよいでしょうか? 中空の円を追加したり、1 2 3 のアラビア数字を追加したりするのはどうでしょうか?
list-style-type : ディスク | 円 | 正方形 | 10 進数 | 下位ローマ字 | 上位ローマ字 | 下位アルファ | 上位アルファ | なし | アルメニア語 | cjk-表意文字 | いろは | カタカナ | カタカナいろは | 下位ラテン語 | upper-latin
値:
disc : CSS1 のデフォルト値。黒丸丸
: CSS1 中空丸
四角 : CSS1 黒四角十
進数 : CSS1 アラビア数字
下ローマ : CSS1 小文字ローマ数字
上ローマ : CSS1 大文字ローマ数字
下アルファ : CSS1 小文字英字
大文字 : CSS1 大文字英字
なし: CSS1 では箇条書きの色を使用しません
: #0099ff; li に追加される色で、接頭点の色が変更されます。
font-size: li のサイズです
line-height は行の高さです
2 行目:
.ul li a{color: #333;font-size: 14px;} は、色とフォント サイズを含む li 内の a タグに割り当てられますが、li の接頭辞ポイントとは何の関係もありません。タグ内のテキストに対してのみ機能します
3 行目:
.ul li:hover{color: #ff6900;} は、li 値をトリガーして、接頭辞ポイントを含む色を変更します。
4 行目:
.ul li:hover a{color: #ff6900} li が :hover をトリガーすると、a タグ内の記事の色だけが変更されます。