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>