`
西蜀石兰
  • 浏览: 117018 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

<a>标签去格式

css 
阅读更多
在导出表中数据放进页面table中时,经常会遇到这么一个问题:数据字符串太长,我们不需要展示全部,鼠标经过时toast全部信息,类似于<a>标签的title功能;

于是可以这么写你的文本
<a title="石兰是个美腻的菇凉">石兰</a>

带来的问题是这么写是一个超链接,而想要的展示效果只是普通文本;

第一反映是重写<a>标签的样式
<style type="text/css">
a:link{color:#000000}
</style>
如果页面没有引入其他框架,这么写是没有问题的;
问题是用的是datatable这么一个神奇的方法,即使你事先定义了<a>标签的样式,也会在加载的时候重新渲染,是的,有先后顺序;

问题到这里似乎卡住了,其实这中间还遇到一个问题,我只是想这一段的<a>标签样式发生变化,而不希望页面上所有的<a>标签样式改变;

于是可以自己定义一个样式:
<style type="text/css">
.mymarkofa a:link{color:#000000} visited{color:#000000} hover{color:#000000} active{color:#000000}
</style>
//注 这里的link visited hover active务必在一行中写完
在代码中引用自己定义的样式就可以了
<div class="mymarkofa">
<a title="石兰是个美腻的菇凉">石兰</a>
</div>

回头再看自己定义的样式,其实我们定义的是一个<div>标签,只是我们把这个<div>标签中的<a>的样式重写了;
css中的各类标签的继承关系,似乎没有java那么严格,或者说并不严格地区分父类和子类,你可以任性地组织各个标签之间的关系;
面向对象的思想真的很重要,如果能想明白这一点,那么回头再看我们遇到的问题,事情真的需要这么复杂么?

我们需要的是<a>标签中title功能、展示的是普通文本。
既然如此,我们按着本该发生的方式写代码就是了:
<a title="石兰是个美腻的菇凉"><span style='color:#000000'>石兰<span></a>
是的,在文本中加上一个标签便是了,再给这个标签的样式赋值。

其实需要理解的是标签渲染的次序,如果明白标签渲染的次序,上面这段html语言很容易理解。
其实没必要这么复杂,你也可以不用<a>标签的title功能,自己直接定义鼠标经过的方法,最后引用这个方法,弱弱的LZ暂时没有去看css源码的想法,只能偷懒喽
分享到:
评论

相关推荐

    attr() 获取多个a标签 ,并根据不同的id 调用不同的function()

    attr() 函数获取html格式下多个&lt;a &gt;标签,并且根据不同id 调用不同的function()函数 给&lt;a&gt;标签添加id ,根据不同id 获取属性病赋值

    WEB设计大全

    &lt;IMG&gt;标签 &lt;br&gt;&lt;br&gt;11.4.3 图像类型 &lt;br&gt;&lt;br&gt;11.4.4 与图像相关的问题 &lt;br&gt;&lt;br&gt;11.4.5 分割图像 &lt;br&gt;&lt;br&gt;11.4.6 Web中基于矢量的艺术: Flash &lt;br&gt;&lt;br&gt;11.5 背景图像 &lt;br&gt;&lt;br&gt;11.6 小结 &lt;br&gt;&lt;br&gt;第12章 利用GUI特性...

    WEB设计大全(part2)

    &lt;IMG&gt;标签 &lt;br&gt;&lt;br&gt;11.4.3 图像类型 &lt;br&gt;&lt;br&gt;11.4.4 与图像相关的问题 &lt;br&gt;&lt;br&gt;11.4.5 分割图像 &lt;br&gt;&lt;br&gt;11.4.6 Web中基于矢量的艺术: Flash &lt;br&gt;&lt;br&gt;11.5 背景图像 &lt;br&gt;&lt;br&gt;11.6 小结 &lt;br&gt;&lt;br&gt;第12章 利用GUI特性...

    超链接(文本超链接、图像超链接)

    -- &lt;a href=""&gt;&lt;/a&gt; --&gt;超链接标签(用于从一个页面链接到另一个页面) &lt;br&gt; 文本超链接 &lt;br&gt; &lt;a href="https://www.baidu.com/"&gt;百度&lt;/a&gt; &lt;div&gt; &lt;!-- &lt;a href=" 不写值 "&gt;百度&lt;/a&gt; --&gt;空链接 &lt;br&gt; &lt;a href=""&gt;&lt;/...

    Visual C++ 编程资源大全(控件 窗体)

    ballon_tip_src.zip&lt;br&gt;一个很酷的TOOLTIP(4KB)&lt;END&gt;&lt;br&gt;80,grid_strl_src.zip&lt;br&gt;MFC网格控件(57KB)&lt;END&gt;&lt;br&gt;81,grid_strl_demo.zip&lt;br&gt;MFC网格控件演示程序(115KB)&lt;END&gt;&lt;br&gt;82,tabwnd.zip&lt;br&gt;标签视(37KB)&lt;END&gt;&lt;br...

    IPv6详解

    第一回合 32&lt;br&gt;4.5 IPv6,第二回合 32&lt;br&gt;第二部分 IPv6细节&lt;br&gt;第5章 IPv6的成型 33&lt;br&gt;5.1 IPv6 33&lt;br&gt;5.1.1 变化概述 33&lt;br&gt;5.1.2 包头结构 35&lt;br&gt;5.1.3 IPv4与IPv6的比较 36&lt;br&gt;5.1.4 流标签 37&lt;br&gt;5.1.5 业务...

    Html5中文手册(程序员必备手册)

    65、&lt;pre&gt; 定义预格式化文本。 66、&lt;progress&gt; 定义任何类型的任务的进度。 67、&lt;q&gt; 定义短的引用。 68、&lt;rp&gt; 定义非ruby显示的内容。 69、&lt;rt&gt; 定义 ruby 注释的解释。 70、 &lt;ruby&gt; 定义 ruby 注释。 71、&lt;script&gt; ...

    雷傲论坛 to 动网7.0 的转换程序

    短消息,只转收件箱&lt;br&gt; &lt;br&gt; &lt;br&gt; 已通过测试版本:0803版及其Hack版、1201版及其Hack版、4.01版及其Hack版&lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; &lt;br&gt; 1.6版对其上一个版本所做的改善如下:&lt;br&gt; &lt;br&gt; a.用户数据部分: 增加头衔...

    Web前端高级作业一.txt

    &lt;a&gt;标签,属性是它的“装备”,可以给它添加功能,如href属性可以使它在被点击的情况下跳到对应网址 2.1重要标签 2.1.1表格标签&lt;table&gt;,常常用于显示内容 表格标题:&lt;caption&gt;&lt;/caption&gt; 表格头:&lt;thead&gt;&lt;tr&gt;&lt;th...

    jquery-1.1.3 效率提高800%

    &lt;br&gt;Safari 2 3575ms 475ms 753% &lt;br&gt;Opera 9.1 3196ms 326ms 980% &lt;br&gt;Average improvement: 867% &lt;br&gt;&lt;br&gt;下表为jQuery1.1.3与常用的一些JS库选择器的对比:&lt;br&gt;Browser Prototype jQuery Mootools Ext Dojo &lt;br&gt;...

    VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:&lt;a&gt;&lt;/a&gt;,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: ...

    使用HTML开发商业网站-有序列表课件.pptx

    &lt;li&gt;列表项1&lt;/li&gt; &lt;li&gt;列表项2&lt;/li&gt; &lt;li&gt;列表项3&lt;/li&gt; ...... &lt;/ol&gt; 有序列表 列表标签 代码如下: 有序列表 列表标签 有序列表相关的属性 属性 属性值 描述 type 1(默认) 项目符号显示为数字1 2 3… a或A 项目...

    Jlink配置为支持普冉MCU

    每种设备可能会在&lt;Device&gt;标签下面。 一个示例格式可能如下: Xml &lt;Database&gt; &lt;Device&gt; &lt;DeviceName&gt;...&lt;/DeviceName&gt; &lt;FlashSize&gt;...&lt;/FlashSize&gt; &lt;Core&gt;...&lt;/Core&gt; &lt;!-- more details here --&gt; &lt;/Device&gt; ...

    Javashop开发规范V2.2

    &lt;ul&gt;&lt;li&gt;&lt;a class="selected"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="search-cat-4-page-2.html" class="unselected"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="search-cat-4-page-3.html" class="unselected"&gt;3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="search-cat...

    AntiXss 4.2.1.msi

    &lt;a href=""&gt;aaaaaaaaa&lt;/a&gt;javascript &lt;p&gt;&lt;img src=""&gt;alert&#40;'a'&#41;&lt;img src="abc.jpg"&gt;&lt;img&gt;&lt;/p&gt; &lt;p&gt;Test&lt;/p&gt; 嗯,非常安全。然后,又有一个疑问了,是应该将用户的输入过滤之后写入数据库呢?还是在输出界面...

    SourceToHTML

    --temp:loop--&gt;&lt;br/&gt; &lt;div id="pagelist"&gt;{--temp:page for=index_list--}&lt;/div&gt;&lt;br/&gt; 包含处理,名称为模版名称&lt;br/&gt; {--include:archives--}&lt;br/&gt;标签&lt;br/&gt; 全局标签 &lt;br/&gt; {--S:PATH--},当前程序路径 &lt;br/&gt; {--S:...

    3GP 转换器

    *.raw&lt;br&gt;可以将它们转换为:&lt;br&gt;3GP/3G2, MP4, AVI, WMV, MP3, M4A, AAC, WMA, AMR 等格式&lt;br&gt;特色功能:&lt;br&gt;∷支持视频分割,帮助您去粗取精,可以只保留你最喜爱的片段&lt;br&gt;∷允许导入外挂的各种字幕文件、支持...

    Bootstrap php制作动态分页标签

    学习了下bootstrap,刚好在用分页,就自己写了一个分页,然后... &lt;li&gt;&lt;a&gt;«&lt;/a&gt;&lt;/li&gt; &lt;li class=active&gt;&lt;a&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a&gt;»&lt;

    git的版本字符串管理gitver.zip

    v&lt;MAJ&gt;.&lt;MIN&gt;.&lt;PATCH&gt;-[&lt;NEXT&gt;|&lt;SNAPSHOT&gt;]-[&lt;COMMIT_COUNT&gt;]/&lt;HASH&gt; The -SNAPSHOT suffix is used when the NEXT version string numbers are known, to denote a snapshot of that future version. The -NEXT ...

    YOYOPlayer(与千千静听一样的Java播放器)

    并且读取中文标签经常会出现乱码,由于YOYOPlayer是国人开发的,所以对中文的支持绝对可以放心,并且可以自定义标签的读取和写入编码.&lt;br&gt; 支持snd,aifc,aif,wav,au,mp1,mp2,mp3,ogg,spx,flac,ape,mac等音频格式音乐。...

Global site tag (gtag.js) - Google Analytics