使用属性选择器用于空链接

当 a 元素没有文本值,但 href 属性有链接的时候显示链接:

a[href^="http"]:empty::before {
    content: attr(href);
}

  

相当方便。  

支持  

这些高级技巧在Chrome、Firefox、Safari、Edge的当前版本,以及IE11中都能有效工作。

时间: 2024-09-29 16:00:06

使用属性选择器用于空链接的相关文章

CSS基础学习七:属性选择器

CSS语法中,对带有指定属性的 HTML 元素设置样式.可以为拥有指定属性的 HTML 元素设置样式,而不仅限 于 class 和 id 属性.(注释:Internet Explorer 7 (以及更高版本)在规定了 !DOCTYPE 的情况下支持属性选择器. IE6 及更低的版本不支持属性选择器.) CSS2引入了属性选择器.属性选择器可以根据元素的属性及属性值来选择元素. 一简单属性选择器 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. (1)先来一个简单的例子:

[转] 属性选择器.mark

CSS 2 引入了属性选择器. 属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title)的所有元素变为红色,可以写作: *[title] {color:red;} 亲自试一试 例子 2 与上面类似,可以只对有 href 属性的锚(a 元素)应用样式: a[href] {color:red;} 亲自试一试 例子 3 还可以根据多个属性进行选择,只需将属性选择器链接在一起即

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. [att=val] 指

csss属性选择器

属性选择器可以根据元素的属性及属性值来选择元素. 简单属性选择 如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器. 例子 1 如果您希望把包含标题(title)的所有元素变为红色,可以写作: *[title] {color:red;} 亲自试一试 例子 2 与上面类似,可以只对有 href 属性的锚(a 元素)应用样式: a[href] {color:red;} 亲自试一试 例子 3 还可以根据多个属性进行选择,只需将属性选择器链接在一起即可. 例如,为了将同时有 hre

jQuery选择器,筛选器,属性选择器

jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“ jQuery的优势 一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻

Css3选择器-属性选择器

一.E[attr] E[attr]属性选择器是CSS3属性选择器中最简单的一种.如果你希望选择有某个属性的元素,而不论这个属性值是什么,你就可以使用这个属性选择器       IE6不支持这个选择器. 二.E[attr="value"] E[attr="value"]选择器和E[attr]选择器,从字面上就能很清楚的理解出来,E[attr="value"]是指定了属性值“value”,而E[attr]只是选择了有对应的属性,并没有明确指其对应的属

新增属性选择器

介绍 属性选择器早在CSS2中就被引入了,其主要作用就是为带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器. CSS3的属性选择器主要包括以下几种: 1. E[attr^="value&qu

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

CSS 属性选择器(八)

一.属性选择器 属性选择使用中括号进行标识,中括号内包含属性名,属性值或者属性表达式 如h1[title],h1[title="Logon"], 二.属性选择器分类 2.1.匹配属性名 [class]{color:red} 作用于任何带有class属性的元素,不管理class的值是什么,也可以是其它元素的所有合法属性如: img[alt]{border:none}; 上面这个会作用于所有带有alt属性的img元素 a[href][title]{font-weight:bold};作用于