本文主要是介绍前端速成-CSS | 04.li标签样式、标签的正常、悬停、触发状态样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.<ul>下<li>的样式

<ul>下<li>的默认样式如下：

可以通过css，修改list-style属性来修改左边图案的样式

下面以修改全局的<ul>子标签<li>为例：

1.1.修改为系统已定义的样式：

系统已定义的还有许多，这里不一一例举

1.2.修改为自定义的图片

书写属性值时，调用url()，并将图片的路径作为参数传入：

先提前调整好图片的尺寸，大约是10px-15px比较合适

2.<input type=“button”>及<button>样式

这两个都是按钮，至于二者的区别，可见文章：

HTML<button> 标签和<input type=“button”>的区别

而对于按钮，有三种状态：

• 正常
• 悬停：鼠标停留在按钮上
• 触发：鼠标点击按钮

下面以<input type=“button”>这样的按钮为例，修改它三种状态下的样式：

2.1.正常状态

由于只希望对按钮的样式进行修改，因此对于按钮，需要为其定义class属性：

<input class="button1" type="button" value="类名为button1的按钮">

如上，<input>的类名为"button1"

随后，在css中，用"标签名.类名"选中：

input.button1 {
    background-color: black;
    color: white;
}

2.2.悬停状态:hover

鼠标移动到按钮处，即为悬停状态。在选择器末尾添加":hover"即可选定

input.button1:hover{
    background-color: red;
    color: white;
}

2.3.触发状态:active

鼠标点击按钮，即为触发状态。在选择器末尾添加":active"即可选定

input.button1:active{
    background-color: deepskyblue;
    color: darkred;
}

3.<a>样式

类似于button，它也有三个状态。修改方式大同小异，不赘述

这篇关于前端速成-CSS | 04.li标签样式、标签的正常、悬停、触发状态样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！