CSS属性选择器的用法有哪些?css属性选择器的用法介绍(代码)

本篇文章给大家带来的内容是关于CSS属性选择器的用法有哪些?css属性选择器的用法介绍(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、存在和值属性选择器

1、存在和值属性选择器

        /*存在和值属性选择器*/           [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。        [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。        [attr~=val]:表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为val。

2、代码实例: 
01_存在和值属性选择器.html

                存在和值属性选择器                    /*             [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。            */            [name]{                background: pink;            }                        
李立超
晓飞张
白浩杰
腿长1米8
佟刚
陈雷
李贺飞

02_存在和值属性选择器.html

                存在和值属性选择器                    /*             [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。            */            [name="atguigu_llc"]{                background: pink;            }                        
李立超
晓飞张
白浩杰
腿长1米8
佟刚
陈雷
李贺飞

03_存在和值属性选择器.html

立即学习“前端免费学习笔记(深入)”;

                存在和值属性选择器                    /*             [attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,                比如位于被空格分隔的多个类(class)中的一个类。            */            [name~="atguigu"]{                background: pink;            }                        
李立超
晓飞张
白浩杰
腿长1米8
佟刚
陈雷
李贺飞

二、子串值属性选择器

1、子串值属性选择器

        /*子串值属性选择器*/        [attr|=val] : 选择attr属性的值是val(包括val)或以val-开头的元素。        [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。        [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。        [attr*=val] : 选择attr属性的值中包含字符串val的元素。

2、代码实例:

                存在和值属性选择器                    /*             [attr|=val] : 选择attr属性的值以val(包括val)或val-开头的元素             [attr^=val] : 选择attr属性的值以val开头(包括val)的元素。             [attr$=val] : 选择attr属性的值以val结尾(包括val)的元素。             [attr*=val] : 选择attr属性的值中包含字符串val的元素。            */            [name^="atguigu"]{                background: pink;            }                        
李立超
晓飞张
白浩杰
腿长1米8
佟刚
陈雷
李贺飞

相关推荐:

CSS3 选择器属性选择器

CSS属性选择器高级用法及选择器优先级问题_html/css_WEB-ITnose

以上就是CSS属性选择器的用法有哪些?css属性选择器的用法介绍(代码)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1611413.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:17:59
下一篇 2025年12月24日 02:18:10

发表回复

登录后才能评论
关注微信