天天育儿网,内容丰富有趣,生活中的好帮手!
天天育儿网 > title属性 给元素增加提示 title属性选择器

title属性 给元素增加提示 title属性选择器

时间:2020-01-10 15:04:44

相关推荐

title属性 给元素增加提示  title属性选择器

title

title属性

作用

title可以给任何标签使用

可对元素增加一个提示作用 即 原被作用元素生效后 鼠标移入到元素生效的区域不动 会提示增加的提示内容

比如 p打印出字体后 加入title属性 则当鼠标移入对应的字体后 会显示提示内容

语法

<p title="笋a贼">有本事把鼠标放上来别动嗷</p>

效果图

属性选择器

选择含有指定特殊位置的属性 比如一个p元素的title设置为ABCD 另一个设置为bcde 我们想选择title中开头为A的元素 这时候就可以用属性选择器 这里可以用 p[title^=“ab”]{}

p[title^=“ab”]{}

加个^表示选择属性中以指定元素开头的属性

p[title^="ab"]{background: gray;}

设置p元素中title属性开头为ab的元素的背景颜色

p[title$=“fg”]{}

加个美元符号表示选择属性中以指定元素结尾的属性

p[title$="fg"]{background: green;}

选择p元素中title属性结尾为fg的p元素

p[title*=“a”]{}

*号符代表选中title任意位置中含有对应元素的属性

p[title*="a"]{font-size: 30px;}

选择p元素中title属性含有a的属性 并设置其字体大小

body代码:

<body><p title="垫拟嘛">有本事把鼠标放上来别动</p><!--title用于鼠标放在元素上时显示的内容--><p>嘿嘿?</p><p>唯独你没懂</p><p title="笋a贼">有本事把鼠标放上来别动嗷</p><p title="abcdef12">单走一张流</p><p title="adcdefg">啥笔</p></body>

总代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>属性选择器</title><style type="text/css">p[title]{color: red;/* title可以给任何标签使用 *作用:对元素增加一个提示作用 即 原被作用元素生效后 鼠标移入到生效的区域不动 会提示增加的提示内容* 比如 p打印出字体后 加入title属性 则当鼠标移入对应的字体后 会显示提示内容*/}/*根据元素中的属性来选择语法:[属性名] 这个是选择所有有title的元素或者可选择有指定属性的如下*/p[title="笋贼"]{background: yellow;}p[title^="ab"]{background: gray;}/*加个^表示选择属性中以指定元素开头的属性*/p[title$="fg"]{background: green;}/*加个$表示选择属性中以指定元素结尾的属性*/p[title*="a"]{font-size: 30px;}/* 加个*表示选择属性中含有指定元素的属性 */</style></head><body><p title="垫拟嘛">有本事把鼠标放上来别动</p><!--title用于鼠标放在元素上时显示的内容--><p>嘿嘿?</p><p>唯独你没懂</p><p title="笋a贼">有本事把鼠标放上来别动嗷</p><p title="abcdef12">单走一张流</p><p title="adcdefg">啥笔</p></body></html>

如果觉得《title属性 给元素增加提示 title属性选择器》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。