广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >css中的子串匹配属性选择器怎么用
  • 582
分享到

css中的子串匹配属性选择器怎么用

2024-04-02 19:04:59 582人浏览 薄情痞子
摘要

小编给大家分享一下CSS中的子串匹配属性选择器怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 更高级的选择器模块,它是

小编给大家分享一下CSS中的子串匹配属性选择器怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。按照规范的说法,应该称之为“子串匹配属性选择器”。

很多现代浏览器都支持这些选择器,包括 IE7。

下表是对这些选择器的简单总结

类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

可以想到,这些选择有很多用途。

举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:

a[href*="w3school.com.cn"] {color: red;}

以上是“css中的子串匹配属性选择器怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: css中的子串匹配属性选择器怎么用

本文链接: https://www.lsjlt.com/news/90415.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css中的子串匹配属性选择器怎么用
    小编给大家分享一下css中的子串匹配属性选择器怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 更高级的选择器模块,它是 ...
    99+
    2022-10-19
  • 如何使用CSS属性值正则匹配选择器
    这篇文章给大家分享的是有关如何使用CSS属性值正则匹配选择器的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。属性值正则匹配选择器包括下面3种:[attr^="val"][attr$="...
    99+
    2023-06-08
  • 怎么用css匹配选择属于其父元素的第N个子元素
    这篇文章主要讲解了“怎么用css匹配选择属于其父元素的第N个子元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用css匹配选择属于其父元素的第N个子元...
    99+
    2022-10-19
  • 如何使用css属性:nth-child(n)匹配选择第n个子元素
    本篇内容介绍了“如何使用css属性:nth-child(n)匹配选择第n个子元素”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细...
    99+
    2022-10-19
  • CSS属性选择器怎么用
    这篇文章主要介绍了CSS属性选择器怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 对带有指定属性的 HTML 元素设置装备摆设名堂...
    99+
    2022-10-19
  • CSS的属性选择器怎么用
    这篇文章主要介绍CSS的属性选择器怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   对带有指定属性的HTML元素设置样式。   可以为拥有指定属性的HTML元素设置样式,...
    99+
    2022-10-19
  • CSS 2中属性选择器怎么用
    这篇文章将为大家详细讲解有关CSS 2中属性选择器怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 属性决定器大约依据元素的属性及属性值来决意元素。 简单属性...
    99+
    2022-10-19
  • css属性和值选择器怎么用
    这篇文章给大家分享的是有关css属性和值选择器怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 上面的例子为 title="W3School" 的全体元...
    99+
    2022-10-19
  • css中的属性选择器是什么
    小编给大家分享一下css中的属性选择器是什么,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! [attr]:匹配拥有attr属性的标签。 [attr=val]:匹配拥有attr属性,...
    99+
    2022-10-19
  • css怎么用特定属性选择器lang
    这篇文章主要介绍了css怎么用特定属性选择器lang,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。     css:l...
    99+
    2022-10-19
  • 怎么使用CSS属性选择器来拼接HTML的DNA
    这篇文章主要介绍了怎么使用CSS属性选择器来拼接HTML的DNA,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。CSS属性选择器非常神奇,它们可以帮你避免添加数不胜数的类名,从...
    99+
    2023-06-08
  • css中的focus选择器怎么用
    这篇文章给大家分享的是有关css中的focus选择器怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   focus选择器   :focus选择器被用来指定“表单元素”获...
    99+
    2022-10-19
  • Css中:checked的选择器怎么用
    这篇文章主要为大家展示了“Css中:checked的选择器怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css中:checked的选择器怎么用”这篇文章吧...
    99+
    2022-10-19
  • CSS中的id选择器怎么用
    这篇文章主要介绍了CSS中的id选择器怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 id 选择器可以为标有特定 id 的 HTML...
    99+
    2022-10-19
  • 怎么用css的position属性实现盒子居中
    小编给大家分享一下怎么用css的position属性实现盒子居中,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!用css的position属性<style&n...
    99+
    2023-06-17
  • css中的first-child选择器怎么用
    这篇文章主要介绍了css中的first-child选择器怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。   CSS3:first-c...
    99+
    2022-10-19
  • css中的after和before选择器怎么用
    这篇文章将为大家详细讲解有关css中的after和before选择器怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。   代码如下:   <!DOCTYPE...
    99+
    2022-10-19
  • css中的UI状态伪类选择器怎么使用
    这篇文章主要介绍“css中的UI状态伪类选择器怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css中的UI状态伪类选择器怎么使用”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
  • css中的:not()选择器和jQuery中的.not()方法怎么用
    这篇文章主要介绍“css中的:not()选择器和jQuery中的.not()方法怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css中的:not()选择器和j...
    99+
    2022-10-19
  • CSS3中的新特性::target-text选择器怎么用
    这篇文章主要介绍了CSS3中的新特性::target-text选择器怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS3中的新特性::target-text选择器怎么用...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作