伞仙博客 伞仙博客
首页
  • 前端文章

    • HTML-CSS
    • JavaScript
    • Vue
    • Node
  • Python数据分析
  • Git
  • 博客搭建
  • 其他
设计
  • 友情链接
关于
  • 分类
  • 标签
  • 归档
GitHub

伞仙

我是伞仙
首页
  • 前端文章

    • HTML-CSS
    • JavaScript
    • Vue
    • Node
  • Python数据分析
  • Git
  • 博客搭建
  • 其他
设计
  • 友情链接
关于
  • 分类
  • 标签
  • 归档
GitHub
  • HTML-CSS文章

    • CSS 属性选择器的区别
      • 1.attribute 属性中包含 value:
      • 2.attribute 属性以 value 开头:
      • 3.attribute 属性以 value 结尾:
      • 总结
    • a标签的钓鱼漏洞
  • JavaScript文章

  • Vue文章

  • Node文章

  • 前端
  • HTML-CSS文章
伞仙
2019-09-09

CSS 属性选择器的区别

# *=, |=, ^=, $=, *= 的区别

# 1.attribute 属性中包含 value:

[attribute~=value] 属性中包含独立的单词为 value,例如:

[title~=flower]
<img src="/i/eg_tulip.jpg" title="tulip flower" />
1
2

[attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行,例如:

[title*=flower]
<img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
1
2

# 2.attribute 属性以 value 开头:

[attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开,例如:

[lang|=en]
<p lang="en">
<p lang="en-us">
1
2
3

[attribute^=value] 属性的前几个字母是 value 就可以,例如:

[lang^=en]
<p lang="ennn">
1
2

# 3.attribute 属性以 value 结尾:

[attribute$=value] 属性的后几个字母是 value 就可以,例如:

[src$=png]
<img src="xxx.png">
1
2

# 总结

"value 是完整单词" 类型的比较符号: ~=, |=

"拼接字符串" 类型的比较符号: *=, ^=, $=

在 GitHub 上编辑此页
#css
上次更新: 2020/09/19, 14:09:00

a标签的钓鱼漏洞 →

最近更新
01
PM2常用命令
01-03
02
node定时发送邮箱
01-03
03
前端RSA加密与解密
01-02
更多文章>
Theme by Vdoing | Copyright © 2020-2021 伞仙 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式