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>