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属性选择器相关推荐

定位到元素后获取其属性_（11）让“盒子”动起来：② “定位”和 BFC | CSS
原创:itsOli @前端一万小时本文首发于公众号「前端一万小时」本文版权归作者所有,未经授权,请勿转载!本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 ❗ ...
使用原生js来替换title属性的悬浮文字提示-可自定义样式和出现时间-190826更新版本2.0源代码
简介要让一个DOM元素出现悬浮文字提示,一般情况下,我们都会选择使用H5的title属性.例如: <div title="456">123</div> 这 ...
C# WCF WinCE 解决方案错误提示之：已超过传入消息(65536)的最大消息大小配额。若要增加配额，请使用相应绑定元素上的 MaxReceivedMessageSize 属性...
C# WCF WinCE 解决方案错误提示之:已超过传入消息(65536)的最大消息大小配额.若要增加配额,请使用相应绑定元素上的 MaxReceivedMessageSize 属性网上的解决方案 ...
html免费编辑器图片alt,织梦模板kindeditor编辑器图片上传增加图片说明alt属性和title属性...
织梦kindeditor编辑器图片上传增加图片说明alt属性和title属性效果图: 1.在织梦/include/kindeditor/kindeditor-all.js 或者 /kindeditor ...
jquery(js) 增加删除修改属性样式、元素内容
引入jquery.js 1.增加或修改样式 $('#id').css('display','none');--根据id设置隐藏 2.$("#id").css({"back ...
php html class,html中规定元素的类名的属性class
实例在 HTML 文档中使用 class 属性: h1.intro {color:blue;} p.important {color:green;} Header 1 A paragraph. No ...
(18)C#传智:HTML,属性,标签,元素,body,Font,A,列表,表格,表单,Div,Span,框架
比较简单,无事的跳过,直接w3c.school 一.HTML简介一个实例:右键查看源文件(标签,属性,内容...) HTML文档=网页 HTML超文本标记语言(Hyper ...
Vue学习2 - 事件处理以及绑定、事件、遍历、判断、元素显示、DOM属性的绑定、comput计算属性值
文章目录 1. 事件处理.以及Vue生命周期函数.事件描述符 1.1 基本用法 1.2 获取事件对象,阻止默认行为.事件冒泡行为.事件描述符 2. for循环 2.1 基本数据类型数组的遍历 2.2 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...

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

title

title属性给元素增加提示 title属性选择器相关推荐

最新文章

热门文章

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

title

title属性 给元素增加提示 title属性选择器相关推荐

最新文章

热门文章

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

title属性给元素增加提示 title属性选择器相关推荐