有趣的css —— li 标签的样式操作(含自定义)

最近发现了一个关于html中 li 标签比较有趣的知识,用起来也是嘎嘎香。

1. 常规

日常开发中,避免不了会用到列表,一般我们会将前面的小点去掉,但是除了去掉,我们还可以有更多的选择,在使用li标签的时候,为 list-style-type:加上以下值,会有比较好的效果哦:

disc 实心圆
square 方块
circle  空心圆
decimal 数字
lower-latin小写字母

上css代码:

 li:nth-child(1) {
      list-style-type: disc;
    }
    li:nth-child(2) {
      list-style-type: square;
    }
    li:nth-child(3) {
      list-style-type: circle;
    }
    li:nth-child(4) {
      list-style-type: decimal;
    }
    li:nth-child(5) {
      list-style-type: lower-latin;
    }

效果演示:

 2. 自定义

除了以上常见的一些样式,我们还可以通过 ::marker 伪元素进行自定义样式,达到自己想要的效果

css代码展示:

  li:nth-child(1)::marker {
      content: '♥';
      color: red;
    }
    li:nth-child(2)::marker {
      content: '√';
      color: green;
    }
    li:nth-child(3)::marker {
      content: '卍';
      color: pink;
    }
    li:nth-child(4)::marker {
      content: '④';
      color: blue;
    }
    li:nth-child(5)::marker {
      content: '♪';
      color: orange;
    }

效果演示:

当然除了放自定义符号,我们还可以放图片 

代码:

 li:nth-child(1)::marker {
      content: url(https://s1.ax1x.com/2023/04/13/ppj04e0.png);
    }
 li:nth-child(2)::marker {
      content: url(https://s1.ax1x.com/2023/04/13/ppj0xw6.png);
    }
 li:nth-child(3)::marker {
      content: url(https://s1.ax1x.com/2023/04/13/ppjBpFO.png);
    }

效果:

 去更远的地方,见更亮的光!

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 CSS 的 :active 伪类来实现点击 li 标签后背景的变化。 示例代码如下: ``` li:active { background-color: #ddd; } ``` 这样,当用户点击 li 标签时,背景颜色会变成 #ddd。 ### 回答2: CSS可以为li标签添加点击后的背景效果,可以通过伪类选择器:hover或者:focus来实现。当鼠标移动到li标签上或者获取焦点时,可以改变其背景颜色。 在CSS中,可以通过以下代码实现这个效果: ```css li:hover { background-color: #f00; /* 鼠标移动到li标签上时的背景颜色 */ } li:focus { background-color: #0f0; /* 获取焦点时的背景颜色 */ } ``` 在上述代码中,li:hover表示当鼠标移动到li标签上时应用的样式li:focus表示当li标签获取焦点时应用的样式。可以根据需求自定义背景颜色。 这样,在网页中使用以上CSS代码后,当鼠标移动到li标签上或者li标签获取焦点时,会呈现出指定的背景颜色。 ### 回答3: CSS是一种用于美化网页的样式语言,可以通过为HTML元素添加样式来改变其外观和行为。当我们想要给li标签点击之后添加背景时,可以使用CSS的伪类选择器来实现。 首先,我们可以为li标签设置一个默认的背景样式,例如背景颜色或背景图片。这样,当用户没有进行点击操作时,li标签会展示默认的背景效果。 接下来,我们可以使用伪类选择器:hover来定义当鼠标悬停在li标签上时的背景样式。我们可以设置鼠标悬停时的背景颜色、背景图片或其他样式,以提供视觉反馈给用户。 如果我们想要让点击之后的背景效果保持一段时间,可以结合使用CSS的伪类选择器:focus和一些JavaScript代码来实现。当li标签被点击时,我们可以通过JavaScript为其添加一个类名,然后使用CSS的类选择器来定义点击之后的背景样式,例如改变背景颜色或背景图片。 总结起来,通过使用CSS的伪类选择器:hover和:focus,我们可以为li标签添加鼠标悬停和点击之后的背景样式。这样可以让用户在与网页进行交互时获得更好的视觉反馈,提高用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值