编程学习
💈CSS学习(7) - 属性选择器和计数器
00 分钟
2023-4-20
2023-11-23
type
status
date
slug
summary
tags
category
icon
password
Email
文章首发于我的个人博客:欢迎大佬们来逛逛

CSS属性选择器

[attribute] 属性用于选择带有指定属性的元素
将所有的带有target属性的a的背景颜色设置为指定的颜色。

[attribute="value"] 选择可以规定指定的值的元素

[attribute~="value"] 选择属性值包含某词的元素
如果我们的title属性包含了 link这个词,则会触发,必须要完全匹配

[attribute|="value"] 选择以指定词开头的元素
其中 值必须是完整且独立的单词:top , top-xxx 等等

[attribute^="value"] 选择以指定词开头的元素
他与上面的区别在于:这个单词不必是完整的,topxxx , top等等

其他选择器:
  • [attribute$="value"] :以指定的value结尾
  • [attribute*="value"] :包含指定的单词value
案例:使用选择器配合不带class或者id的表单

CSS表单

填充输入框

获得焦点的输入框
outline 消除输入框的周围的蓝色边框

带滑动效果的输入框:
设置了 transition 属性,我们将在后面讲到。
案例:CSS修饰html表单
 
notion image

CSS计数器

通过css规则可以使得计数器的值增加,然后我们就可以根据计数器的值来调整相应的外观
  • counter-reset:创建或者重置计数器
  • counter-increment:递增计数器
  • content:插入内容
  • counter() 或者 counters():将计数器的值添加到元素

为每个标题都指明标签:
注意 content 插入的时候的语法规则

嵌套计数器
在一级标题的基础上加上对二级标题计数器操作

 

评论
  • Twikoo
  • Valine